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'); 
});

而且一个CSS的为li.withchild a.itemchild:hover{the new background}

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

li.withchild ul，.itemchild的背景仍然有新的背景。但是如果我将鼠标悬停起来

li.withchild ul回到.itemchild背景返回到旧背景。

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

来源

2011-06-12 Sparkup

你需要为此使用javascript吗？ – cusimar9 2011-06-12 22:13:35

嗯是的，因为我不明白我怎么可以用CSS来做：'li.withchild ul：hover {/ * change .itemchild background * /}'？ – Sparkup 2011-06-12 22:16:20

好吧，那就是你编码它的行为。对我来说似乎是对的。你希望它做什么的行为？ – 2011-06-12 22:16:28

如果你想拥有.itemchild显示新的背景，当你的鼠标是通过任一.itemchild OR li.withchild 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换成wrapAll()自己的新div，然后附加事件。

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

来源

2011-06-12 22:20:51

是的，你是。但是我可以用CSS来做到这一点，当我将鼠标悬停在li.withchild ul上时，我的问题就会出现在你的案例中，背景将会回到原来的状态。我会设置一个jsfiddle。 – Sparkup 2011-06-12 22:25:20

如果您将事件附加到父'li.withchild'（而不是'li.withchild ul'），那么我认为它应该按照需要工作。 – 2011-06-12 22:27:58

你说得对，谢谢。 – Sparkup 2011-06-12 22:52:38

jQuery的菜单悬停

回答

相关问题