html - 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/