Проблема с Нестабильными событиями и родителями

Question

Так скажем, у меня есть блок вложенной дивы:

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

Я хочу, чтобы такого рода поведение:

1. Hover на делах. Этот конкретный div изменяет цвет фона, а его дети этого не делают.
2. Наведите указатель мыши на ребенка этого дива. Опять же, он меняет цвет, пока его дети этого не делают, И (важно) его родитель возвращается к исходному цвету.
3. Вернитесь к родительскому div. Ребенок возвращается к исходному цвету, родитель снова меняет цвет.

Первые два шага легко:

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

Но я ударил загвоздка в этот последний шаг, потому что, когда я вхожу ребенка DIV событие MouseEnter еще активен на родителя; все, что я сделал, это заставить его выглядеть так, как будто это не так. Единственный способ вызвать движение мыши на родителях - полностью закрыть вложенный блок и снова ввести его. Есть ли способ обойти это?

Answer 1

Добавить событие mouseleave к родительскому объекту и удалить цвет родителя.

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