jQuery vol stationnaire

Question

Cette question peut avoir été posée et je suis désolé si je l'ai raté,

J'ai cette liste déroulante structure du menu:

<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> 

Je change de fond de itemchild au 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'); 
}); 

Et le CSS pour li.withchild a.itemchild:hover{the new background}

Mon problème: Si je passe la souris sur .itemchild les changements de fond, puis passe la souris sur

li.withchild ul, fond de .itemchild reste avec le nouveau fond. Mais si je passe la souris

li.withchild ul sur .itemchild l'arrière-plan revient à l'arrière-plan.

Quelle est la meilleure façon de contourner ce problème?

Answer 1

Si vous voulez avoir .itemchild afficher le nouveau arrière-plan lorsque votre souris survole soit .itemchild OU li.withchild ul, la meilleure façon serait probablement d'attacher le vol stationnaire à l'élément parent:

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

Ou, vous pourrait d'abord envelopper li.withchild ul et .itemchild dans un nouveau div de leur propre avec wrapAll(), puis attacher l'événement à cela. Est-ce que je comprends votre question correctement?