javascript - 父子悬停未按预期工作

Question

我有一个这样的 HTML，其中内部是子 div，外部是父 div。

我必须实现的目标:激活鼠标悬停在上面的那个 div。

我调用了 jQuery 的悬停函数，它帮助我添加和删除事件类。

问题:当我将光标向上移动到 innerchild div 时，它被激活，但是当我将光标从内部 div 移出到外部父 div 时，它缓慢地被激活，外部没有被激活。

我也跟踪了鼠标的移动。 <强> https://jsfiddle.net/Simplybj/zaz1qh8e/2/ .

结果:当内部div悬停时，外部div的mouseout没有触发

 $('div').hover(
   function() {
     $('div').removeClass('activeHover');
     $(this).addClass('activeHover');
   },
   function() {
     $(this).removeClass('activeHover');
   }
 );

.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}
.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}
.activeHover {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">

  </div>
</div>

Answer 1

如果你想实现这一点，你还需要监听 mousemove 事件。 此外，我添加了 event.stopPropagation(); 因此当您在 .inner div 中悬停或移动时，.outer 的事件将没有被解雇。

$('div').bind({
  mouseenter: eve,
  mousemove: eve,
  mouseout: function() {
    $(this).removeClass('activeHover');
  }
});

function eve(event) {
  event.stopPropagation();
  $('div').removeClass('activeHover');
  $(this).addClass('activeHover');
}

.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}
.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}
.activeHover {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">

  </div>
</div>