有没有办法使用CSS向后工作[重复]答案

【问题标题】：Is there a way to work backwards using CSS [duplicate]有没有办法使用CSS向后工作[重复]
【发布时间】：2013-04-15 19:51:34
【问题描述】：

我想知道是否有办法在 CSS 中反向工作。我的意思是说我在 div 标签周围有一个边框，然后在该 div 标签内是一个具有悬停功能的链接。有没有办法在该链接悬停时更改 div 标签上的边框颜色，或者这只能使用 jquery 实现？

【问题讨论】：

从技术上讲，如果您将鼠标悬停在链接上，您将悬停在 div 上...
但是，如果将鼠标悬停在 div 上，您并不总是将鼠标悬停在链接上。
是的，当我将鼠标悬停在它上面时，div 会改变颜色，然后里面是一个链接。我希望该 div 在链接悬停时更改颜色。

标签： jquery html css border hyperlink

【解决方案1】：

你可以让整个 div 悬停：

.outer-class:hover {
  border-color: some-color;
}

而 outer-class 是 div 的类。

【讨论】：

【解决方案2】：

您的问题的答案是：不，没有这种方法。使用 jQuery 来实现这一点还是有点过头了，我不建议这样做。相反，重构您的标记并记住您可以访问伪类 (:hover) 不仅用于链接（我们支持 IE6 的日子已经结束，甚至 IE7 也支持 :hover 任意元素 iirc），所以您可以简单地这样做：

div:hover {
    border-color:green;
}

【讨论】：

【解决方案3】：

有点可能。这是一个例子：http://jsfiddle.net/hL3Ta/

<div>
    <a href="#">Some link</a>
</div>

div {
    display: inline-block;
    border:5px solid black;
}
div:hover {
    border: 5px solid red;
}

a {
    display: inline-block;
    width: 100px;
    height: 100px;
}

正如其他答案中提到的，块模型的性质目前不允许选择器反向操作。纯 CSS 解决方法是在将尺寸作为嵌套目标的容器上使用伪元素。

【讨论】：

【解决方案4】：

当下一个 CSS 选择器规范准备好并由浏览器实现时，这将成为可能。那么就可以这样写：

!div a:hover { border-color: red; }

目前的工作草案提案在这里：http://www.w3.org/TR/2012/WD-selectors4-20120823/#subject

【讨论】：