jquery - jQuery菜单悬停

这个问题可能之前曾有人问过，很抱歉，如果我错过了，

我有这个下拉菜单结构：

<ul id="menu">
    <li><a>text1</a></li>
    <li class="withchild"><a class="itemchild">text2</a>
        <ul>
        ...
        </ul>
    </li>
    <li><a>text3</a></li>
</ul>

我正在更改itemchild在hover上的背景。

$("li.withchild ul").hover(function(){
    $(this).parent().find('.itemchild').css('background','the new background');
},
function(){
    $(this).parent().find('.itemchild').css('background','the old background');
});

还有一个li.withchild a.itemchild:hover{the new background}的CSS

我的问题：如果将鼠标悬停在.itemchild上，背景会发生变化，然后将鼠标悬停在

li.withchild ul，.itemchild的背景保持为新背景。但是如果我徘徊

li.withchild ul回到.itemchild，背景恢复为旧背景。

解决此问题的最佳方法是什么？

最佳答案

如果希望当鼠标悬停在.itemchild或.itemchild上时li.withchild ul显示新的背景，最好的方法可能是将鼠标悬停在父元素上：

$("li.withchild").hover(function(){
    $(this).find('.itemchild').css('background','the new background');
},
function(){
    $(this).find('.itemchild').css('background','the old background');
});

或者，您可以先使用wrapAll()将li.withchild ul和.itemchild包装到它们自己的新div中，然后再将事件附加到该对象上。

我是否正确理解您的问题？

关于jquery - jQuery菜单悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6325031/