Question

所以我想说我有一个嵌套的div块：

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

我想要这种行为：

将鼠标悬停在div上。那个特殊的div会改变背景颜色，而它的孩子则不会。
将鼠标悬停在该div的孩子身上。同样，它改变了颜色，而它的孩子却没有，并且（重要的）它的父版恢复到原来的颜色。
回到父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');
  });
});

悬停事件和父母的问题

1 个答案: