你可以将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

由于这些是相邻的兄弟姐妹,您可以使用相邻的兄弟选择器:+.

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

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

*一个其他的答案中提到的一般兄弟选择,具有动态伪类等中使用时不会在Webkit的工作,:hover由于这个错误.请注意,如果您尝试使用动态伪类堆叠相邻的兄弟选择器,则同样的错误将导致Webkit出现问题.例如,#this:hover + sibling + sibling在Webkit中不起作用.

Answer 2

有一般兄弟选择器(~)选择兄弟元素.

因此,对于您发布的HTML,#header:hover ~ .element将选择<div class="element">何时是hovered标题的后续兄弟.

即使IE 7也支持它,所以你处于相对稳固的基础上.

Answer 3

我不这么认为。此结构：#header .bgchange:hover .element 表示 .element 位于 .bgchange 内部。我猜这个需要 JS