Problème avec les événements de vol stationnaire et les parents

Question

Alors disons que j'ai un bloc de divs imbriqués:

<div class='nested'> 
<div class='nested'> 
    <div class='nested'></div> 
</div> 
</div> 

Je veux ce genre de comportement:

1. vol stationnaire sur une div. Cette div particulière modifie la couleur de fond, et ses enfants ne le font pas.
2. Passez la souris sur l'enfant de ce div. Encore une fois, il change de couleur alors que ses enfants ne le font pas, ET (important) son parent revient à sa couleur d'origine.
3. Remonter à la div parente. L'enfant revient à la couleur d'origine, le parent change une fois de plus de couleur.

Les deux premières étapes sont faciles:

$(function() { 
    $('.nested').bind('mouseenter',function() { 
    $(this).css('background-color','#EEE'); 
    $(this).parent().css('background-color','white'); 
    }).bind('mouseleave',function() { 
    $(this).css('background-color','white'); 
    }); 
}); 

Mais je frappé un accroc à cette dernière étape, parce que quand je rentre un enfant div l'événement mouseenter est toujours actif sur le parent; Tout ce que j'ai fait c'est de donner l'impression que ce n'est pas le cas. La seule façon de déclencher le mouseleave sur les parents est de quitter complètement le bloc imbriqué et d'entrer à nouveau. Y a-t-il un moyen de contourner ceci?

Answer 1

Ajoutez un événement mouseleave au parent et supprimez la couleur du parent.

$(function() { 
    $('.nested').bind('mouseenter',function() { 
    $(this).css('background-color','#EEE'); 
    $(this).parent().css('background-color','white'); 
    }).bind('mouseleave',function() { 
    $(this).css('background-color','white'); 
    // put the color back on the parent 
    $(this).parent().css('background-color', '#EEE'); 
    }); 

    // remove the color from the parent 
    $(".parent").bind("mouseleave", function() { 
    $(this).css('background-color','white'); 
    }); 
});