html - css悬停元素显示孩子，当我将鼠标悬停在孩子身上时，如何将悬停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

您要问的实际上是默认行为。当您将鼠标悬停在孩子上时，父级也会收到悬停状态，并且悬停 css 仍应显示。看看这个例子：

http://jsfiddle.net/jxZ6S/

我们将需要更多代码来查看到底是什么错误。您确定要将悬停样式应用于父级，而不是应用于a?