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>

和一个用于

li.withchild a.itemchild:hover{the new background}

我的问题：如果我将鼠标悬停在

.itemchild

上，背景会发生变化，然后将鼠标悬停在

li.withchild ul

，

.itemchild

的背景保留为新背景。但如果我离开

li.withchild ul

返回到

.itemchild

背景返回到旧背景

---

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

如果您想让

.itemchild

在鼠标悬停在

.itemchild

或

li上时显示新背景。如果使用child ul

，最好的方法可能是将鼠标悬停附加到父元素：

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

或者，您可以先将

li.withchild ul

和

.itemchild

包装到它们自己的新div中，然后将事件附加到该div中

---

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

您需要使用javascript吗？是的，因为我不知道如何使用CSS：

li.withchild ul:hover{/*change.itemchild background*/}

？这正是您编写它的目的。对我来说似乎是对的。你希望它做什么行为？只要我在

li.withchild ul

或

.itemchild

。我希望

.itemchild

的背景是新的背景（它是一个向下的箭头）。是的，你是。但是我可以用CSS来做，我的问题是当我在li上悬停的时候，你的背景会回到原来的背景。我将设置一个JSFIDLE。如果您将事件附加到父级

li.withchild

（而不是

li.withchild ul

）上，那么我认为它应该可以正常工作。

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