CSS：悬停 - 为什么子项不会出现？

Question

我无法弄清楚我的错误：悬停CSS以显示子项目。

p:hover #main-navigation{display:block;}

＃main-navigation 设置为display：none，所以上面的代码会将其重置为可见？

这是JS fiddle。

Answer 1

您必须使用adjacent sibling selector：

p:hover + #main-navigation{ display:block; }

这里是updated fiddle

Answer 2

#main-navigation不是p的后代，而是兄弟姐妹（因此div永远不能成为p的后代。这是你的小提琴的标记，其缩进的一些变化使这更清楚：

<div id="menuWrapper">
    <p>hover me to see the menu</p>
    <div id="main-navigation">
        <!-- ul id="menu" ... -->
    </div>
</div>

直接但天真的答案是用兄弟选择器替换后代选择器：

p:hover+#main-navigation{display:block;}

然而as you can see，一旦光标离开p，#main-navigation将会消失，从而阻止用户访问#main-navigation。

我建议将:hover移到包装器元素上：

#menuWrapper:hover #main-navigation{display:block;}

这样，the cursor is able to access #main-navigation，仍然保留在包装器的内容区域内，用于:hover。 p元素可以保持原样，因为它代表标签文本。