Question

之前可能已经提出过这个问题，如果我错过了，我很抱歉，

我有这个下拉菜单结构：

<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，背景返回旧背景。

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

Answer 1

如果您希望在鼠标位于.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中，然后将事件附加到该div。

我能正确理解你的问题吗？

jQuery菜单悬停

1 个答案: