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

【问题标题】：Can you apply a CSS hover effect to an element that’s not a child of the hovered element?您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？
【发布时间】：2011-06-01 08:16:56
【问题描述】：

我不确定这是否可能。我现在正在使用 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>

【问题讨论】：

你能验证我在 chrome 和 firefox 上试过吗？但事实并非如此。 ://
这行不通，因为您的第二条规则是说，当我在当前悬停在 bgchange 类的元素内找到类为 element 的元素时ID 为 header 的元素应用此规则。这并不反映您提供的 HTML。
好的，我删掉了“bgchange”类，这样更容易阅读。

标签： css html hover background-color

【解决方案1】：

我不这么认为。这种构造：#header .bgchange:hover .element 表示 .element 在 .bgchange 内。我猜这个需要JS

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

general sibling selector (~) 可以选择同级元素。

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

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

【讨论】：

我将研究 webkit 的兄弟选择器。
如何选择元素之前的元素？ ~ 只选择它之后的元素。

【解决方案4】：

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

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

大多数现代浏览器都很好地支持此功能*。 IE7 可能有问题。 IE6及以下不支持。

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

【讨论】：

非常好！是的'+'确实有效。这个问题产生了两个很好的解决方案。 '+' 回答了这个问题，但是一旦 webkit 团队修复了这个错误，'~' 将有助于将来参考。
另外，这对我不起作用，直到我意识到有问题的兄弟姐妹必须在（在 html 中）悬停的元素之后。

【解决方案5】：

关于同级选择器 webkit 错误，本文有一个仅 css 的解决方法：

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

引用：

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

Above 在页面上创建了一个动画，这似乎神奇地解决了这个问题。以上内容可以直接添加到主 css 或创建一个仅 webkit 的样式表以与您的 ie hacks 一起使用。

建议只使用 webkit 样式表：

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

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

【讨论】：