html - css hover 元素显示 child ，当我将鼠标悬停在 child 身上时，如何将 hover css 保留在父级上？

Question

我有一个 <ul>有几个<li>元素。 <li>里面元素有一个大<div>默认情况下是隐藏的。当我将鼠标悬停在 <li> 上时它的背景和底部边框一样改变颜色并显示 <div> .这是预期的行为。请注意，我使用的是 css 而不是 javascript 来实现悬停效果。 .menuItem:hover .menuBody { display:block;} .我的问题是，当我将鼠标悬停在现在显示的 <div> 上时它的父级 <li>在这种情况下，失去了它的悬停风格。当我将鼠标悬停在 <div> 上时，如何强制父级保持悬停样式？菜单的基本 html 是这样的。任何帮助或提示当然值得赞赏。

<ul>
    <li class="menuItem">
        <a href="#">MenuItem</a>
        <div class="menuBody></div>
    </li>
</ul>

Answer 1

你问的实际上是默认行为。当你将鼠标悬停在一个 child 身上时， parent 也会收到悬停状态，悬停 css 应该仍然显示。看看这个例子:

http://jsfiddle.net/jxZ6S/

我们需要更多的代码来查看到底哪里出了问题。您确定要将悬停样式应用到父级，而不是 a 吗？