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

由于这些是相邻的兄弟姐妹，因此您可以使用adjacent sibling selector：+。

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

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

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

Answer 2

general sibling selector（~）选择了兄弟元素。

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

Even IE 7 supports it，所以你处于相对稳固的基础上。

Answer 3

在兄弟选择器webkit bug中，本文只有一个css解决方法：

http://css-tricks.com/webkit-sibling-bug/

引用：

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

上面在页面上创建一个动画，这神奇地似乎解决了这个问题。以上内容可以直接添加到主css中，也可以创建一个仅限webkit的样式表来与你的黑客一起使用。

建议仅使用webkit样式表：

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>

因为它将其隐藏在其他浏览器中，并且一旦修复了错误，将来可以更轻松地将其删除。

Answer 4

不幸的是，除非你的.element类在.bgchange元素中，否则它不会起作用。这就是级联的本质：你不能（仅通过CSS）影响在结构上/层次上相互删除的DOM元素。

Answer 5

我不这么认为。这个结构：#header .bgchange：hover .element表示.element在.bgchange中。我想这个需要JS

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

5 个答案: