javascript - 嵌套悬停事件，只适用于最直接悬停的元素

Question

HTML:

<div class="outer">
  <div class="inner">

  </div>
</div>

CSS:

.outer {
  outline: 1px solid green;
  padding: 20px;
}

.inner {
  outline: 1px solid red;
  height: 50px;
}

.hover {
  outline: 1px solid yellow;
}

JS:

$('.outer, .inner').on('mouseenter', function(e){

  $(this).addClass('hover');

}).on('mouseleave', function(e){

  $(this).removeClass('hover');

});

http://codepen.io/anon/pen/tEAiG/

有没有办法让悬停类只应用于直接悬停的元素？ IE。当鼠标在内部 div 内部时它是黄色的，而不是外部的？

Answer 1

由于您是通过自己添加类来处理悬停，而不是使用 CSS :hover，因此您可以 stop propagation响应 mouseenter 时处理程序中的事件。

这样，如果处理程序对 .inner 使用react，它将停止传播()以防止事件也转到 .outer

另一个问题是您必须进入外部并处理它才能到达内部，因此您需要删除必须添加到父节点。

在 this fiddle 中展示