Html 您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4559178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you apply a CSS hover effect to an element that’s not a child of the hovered element?
提问by WilliamB
I was not sure if this is possible or not. I am working in CSS3 animations right now and I need to hover on a link that will effect other div element(non-child) on the page. I was not sure if there is a work around or not.
我不确定这是否可能。我现在正在使用 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>
回答by stevelove
Since these are adjacent siblings, you can use the adjacent sibling selector: +.
由于这些是相邻的兄弟，您可以使用相邻的兄弟选择器: +。
#header:hover + .element {
background-color:blue;
}
This is well supported in most modern browsers*. IE7 can be buggy. IE6 and below does not support it.
大多数现代浏览器都很好地支持这一点*。IE7 可能有问题。IE6 及以下不支持。
* One of the other answers mentions the general sibling selector, which does not work in Webkit when used with a dynamic pseudo-class like :hoverdue to this bug. Take note that this same bug will cause problems in Webkit if you attempt to stack adjacent sibling selectors with a dynamic pseudo-class. For example, #this:hover + sibling + siblingwill not work in Webkit.
* 其他答案之一提到了通用同级选择器，:hover由于此错误，当与动态伪类一起使用时，该选择器在 Webkit 中不起作用。请注意，如果您尝试使用动态伪类堆叠相邻的同级选择器，则相同的错误将导致 Webkit 出现问题。例如，#this:hover + sibling + sibling在 Webkit 中将不起作用。
回答by Paul D. Waite
There is the general sibling selector(~) that selects sibling elements.
有选择同级元素的通用同级选择器( ~)。
So with the HTML you've posted, #header:hover ~ .elementwould select <div class="element">when it's a subsequent sibling of the hovered header.
因此，对于您发布的 HTML，#header:hover ~ .element将选择<div class="element">它何时是悬停标题的后续兄弟。
Even IE 7 supports it, so you're on relatively solid ground.
甚至 IE 7 也支持它，因此您的基础相对稳固。
回答by rjc730
Re the sibling selector webkit bug, this article has a css only workaround:
关于兄弟选择器 webkit 的错误，这篇文章只有一个 css 解决方法：
Quoting:
引用：
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
Above creates an animation on the page and this magically seems to fix the problem. The above can be added directly to main css or a create a webkit only stylesheet to go with your ie hacks one.
上面在页面上创建了一个动画，这似乎神奇地解决了这个问题。以上内容可以直接添加到主 css 中，或者创建一个仅用于 webkit 的样式表，以配合您的 ie hacks 样式表。
Would recommend the webkit only stylesheet something like:
会推荐 webkit only 样式表，例如：
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>
as it hides it from other browsers and can be more easily removed in the future once the bug is fixed.
因为它将它隐藏在其他浏览器之外，并且一旦修复了错误，将来可以更轻松地将其删除。
回答by Phil.Wheeler
Unfortunately this will not work unless your .element class is within the .bgchange element. That's the nature of the cascade: you cannot (through CSS alone) affect DOM elements that are structurally / heirarchically removed from each other.
不幸的是，除非您的 .element 类在 .bgchange 元素中，否则这将不起作用。这就是级联的本质：您不能（仅通过 CSS）影响在结构上/层次上彼此删除的 DOM 元素。
回答by Mat
I dont think so. This construction: #header .bgchange:hover .element indicates that .element is inside the .bgchange. I guess this one needs JS
我不这么认为。此结构：#header .bgchange:hover .element 表示 .element 位于 .bgchange 内。我想这个需要 JS
