Проблема с парящими событиями и родителями - PullRequest
Новая
       26

Проблема с парящими событиями и родителями

3 голосов
/ 17 февраля 2010

Итак, допустим, у меня есть блок вложенных div: 

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

Я хочу такое поведение:

  1. наведите курсор на дел. Этот конкретный 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 все еще активно на родительском элементе; все, что я сделал, это сделал так, чтобы это не было Единственный способ вызвать отпуск мышью у родителей - полностью выйти из вложенного блока и войти снова. Есть ли способ обойти это?

1 Ответ

4 голосов
/ 17 февраля 2010

Добавьте событие 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');
  });
});
...