亲子悬停无法正常工作

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();，当您将鼠标悬停或移入.innerdiv时，.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>