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的菜單懸停

回答

相關問題