Css 在悬停时显示我的导航

Question

我通常不会遇到 css 问题，我自己制作了这个导航菜单，但我似乎无法理解为什么当我将鼠标悬停在某个元素上时它不会显示我的 div ...我创建了一个 jsfiddle @ http://jsfiddle.net/LuLTM/以及所有代码......

#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}

我希望当鼠标悬停在 div #beautyworld 上时 div #beautyhealth 出现......我只是不明白为什么我的 css 不起作用......有人可以请教吗？谢谢你

Answer 1

我认为问题在于您试图将鼠标悬停在当前“显示:无”的内容上。因为 display none 会折叠元素，所以没有什么可以悬停的。您需要将其悬停在相对的父级别以显示子项。

例如:

#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }