jquery - 悬停事件和父母的问题

Question

所以假设我有一个嵌套的 div 块：

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

我想要这种行为：

1. 将鼠标悬停在 div 上。那个特定的 div 会改变背景颜色，而它的子元素不会。
2. 将鼠标悬停在该 div 的孩子上。再次，它改变颜色，而它的孩子不改变，并且（重要）它的父母恢复到原来的颜色。
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 时，鼠标输入事件在父级上仍然处于活动状态；我所做的只是让它看起来不是。触发父级 mouseleave 的唯一方法是完全退出嵌套块并再次进入。有没有解决的办法？

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