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

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

刚刚用相邻兄弟组合器解决了。我声明并调用 'logged' 作为 id 并在 .logged: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 来提高悬停规则的特异性，而不是这样做也已经到了：

#nav .logged:hover + nav_child {

顺便说一句，这些问题几乎总是可以使用浏览器开发面板中的样式检查器进行追踪。在这种情况下，您会看到两个规则，并且您会看到第二个规则覆盖了第一个规则。这很容易导致您得出这是一个特异性问题的结论。大多数样式检查器都可以让您“模拟”悬停状态。

有关特异性的更多信息，请参阅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;
}