css用于显示子元素的悬停元素，当鼠标悬停在子节点上时，如何将hover css保留在父节点上？

I have a <ul> with several <li> elements. Inside the <li> element there is a large <div> that is hidden by default. When I hover the <li> its background changes color as does the bottom border as well as displaying the <div>. This is the expected behavior. Note I am using css and not javascript for the hover effect. .menuItem:hover .menuBody { display:block;}. My problem is that when I hover over the now showing <div> its parent, the <li> in this case, loses it's hover style. How can I force the parent to keep the hover styling when I hover over the <div>? Basic html for the menu is like this. Any help or tips is of course appreciated.

我有一个带有几个

元素的

元素内部有一个默认隐藏的大
。当我悬停
时,它的背景会像底部边框一样改变颜色,也会显示
。这是预期的行为。注意我使用css而不是javascript来悬停效果。 .menuItem:hover .menuBody {display:block;}。我的问题是,当我将鼠标悬停在现在显示的
其父级时,在这种情况下

时,它的背景会像底部边框一样改变颜色,也会显示。这是预期的行为。注意我使用css而不是javascript来悬停效果。.menuItem:hover .menuBody {display:block;}。我的问题是,当我将鼠标悬停在现在显示的其父级时,在这种情况下

会丢失它的悬停样式。当我将鼠标悬停在
上时,如何强制父母保留悬停样式?菜单的基本html是这样的。任何帮助或提示当然是值得赞赏的。

元素的。在元素内部有一个默认隐藏的大。当我悬停时,它的背景会像底部边框一样改变颜色,也会显示。这是预期的行为。注意我使用css而不是javascript来悬停效果.menuItem:hover .menuBody {display:block;}。我的问题是,当我将鼠标悬停在现在显示的其父级时,在这种情况下会丢失它的悬停样式。当我将鼠标悬停在上时,如何强制父母保留悬停样式?菜单的基本html是这样的。任何帮助或提示当然是值得赞赏的。

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

1 个解决方案

#1

What you are asking is actually default behavior. When you hover over a child, the parent also receives the hover status, and the hover css should still be displayed. Have a look at this example:

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

http://jsfiddle.net/jxZ6S/

We will need some more code to see what exactly is wrong. Are you sure you are applying the hover style to the parent, and not to the a?

我们需要更多代码来查看究竟是什么问题。您确定要将悬停样式应用于父级,而不是a吗?

#1