css - 您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？

Question

我不确定这是否可能。我现在正在研究 CSS3 动画，我需要将鼠标悬停在会影响页面上其他 div 元素(非子元素)的链接上。我不确定是否有解决方法。

<style type="text/css">

#header {
 background-color:red;
}

#header:hover .element {
 background-color:blue;
}

.element {
 background-color:green;
}

</style>

-

<header id="header">
     <li><a href="#">Hover</a></li>
</header>

<div class="element" >
 <p>hello world </p>
</div>

Answer 1

由于这些是相邻的 sibling ，您可以使用 adjacent sibling selector : +。

#header:hover + .element {
 background-color:blue;
}

这在大多数现代浏览器中都得到了很好的支持*。 IE7 可能有问题。 IE6及以下不支持。

* 其他答案之一提到了通用兄弟选择器，由于 this bug，当它与 :hover 这样的动态伪类一起使用时，它在 Webkit 中不起作用。 .请注意，如果您尝试使用动态伪类堆叠相邻的同级选择器，同样的错误将导致 Webkit 出现问题。例如，#this:hover + sibling + sibling 在 Webkit 中将不起作用。