Question

当另一个div悬停时，我将问题应用于div。这是我的情景：

<div id="nav">
    <div class="logged"></div>
    <div class="nav_child"></div>
</div>

.logged:hover .nav_child {
    display: initial;
}
#nav .nav_child {
    display: none;
}

但它不起作用。我还尝试了.logged:hover > .nav_child和.logged:hover + .nav_child，但仍然没有。它仅适用于#nav:hover .nav_child，但我需要在.logged悬停时显示，而不是在#nav悬停时显示。

有什么想法吗？

Answer 1

刚刚用相邻兄弟组合器解决了。我声明并致电＆＃39;已登录＆＃39;作为id并在.log：hover和.nav_child之间添加+它有效。

参考：相邻的兄弟组合子：http://css-tricks.com/child-and-sibling-selectors

旧代码：http://jsfiddle.net/8rdh7m2j/

工作代码：

<div id="nav">
<div class="logged" id="logged">Hello</div>
<div class="nav_child">Puff</div>
</div>
#logged:hover + .nav_child {
display: initial;
}

#nav .nav_child {
display: none;
}

演示：http://jsfiddle.net/hwh3o8u0/1/

Answer 2

即使只从孩子那里删除#nav并且+

.logged:hover+.nav_child {
    display:initial;
}
 .nav_child {
    display: none;
}

http://jsfiddle.net/dz22m10y/

Answer 3

您使用.logged:hover + .nav_child方法走在正确的轨道上。它没有工作的原因是#nav .nav_child具有更高的特异性（因为它包含一个ID），因此优先于前面的规则。

是的，您可以通过移动到logged的ID来解决这个问题，就像您在自我答案中所做的那样，但是您可以通过在ID中添加ID来提高悬停规则的特异性。已经到了那里了：

#nav .logged:hover + nav_child {

顺便说一句，几乎总是可以使用浏览器开发面板中的样式检查器来跟踪这些问题。在这种情况下，您会看到两个规则，并且您会看到第二个规则覆盖了第一个规则。这很容易让您得出结论，这是一个特异性问题。大多数风格检查员都会让你有能力模仿＆＃34;徘徊状态。

有关特异性的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。在您的情况下，您的原始第一个规则的特异性为20（两个类），第二个规则为101（一个ID和一个类）。

Answer 4

Here is a good resource that covers this topic http://jsfiddle.net/ThinkingStiff/a3y52/
<div id="nav">
    <div id="one" class="logged"></div>
    <div id="two" class="nav_child"></div>
</div>
#one:hover ~ two,
{
    background-color: black;
    color: white;
}

CSS - 悬停在元素上不会将样式应用于另一个

4 个答案: