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

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，因此您可以在对 mouseenter 做出反应时在处理程序中 stop propagation 处理事件。

这样，如果处理程序对 .inner 做出反应，它将 stopPropagation() 以防止事件也转到 .outer

另一个问题是您必须进入外部并对其进行处理才能到达内部，因此您需要删除 必须已添加到的悬停类父节点。

在this fiddle中展示

Answer 2

一种可能的方法是从外部 div 中删除悬停类，然后在鼠标位于内部 div 内时将其应用到内部 div，因为每当您进入内部 div 时，悬停类都会应用于两个 div .

Answer 3

您可以通过为每个单独的处理程序来做到这一点。

$('.outer').on('mouseenter', function(e){      
  $(this).addClass('hover');      
}).on('mouseleave', function(e){     
  $(this).removeClass('hover');      
});

$('.inner').on('mouseenter', function(e){
  $(this).addClass('hover');
  $('.outer').removeClass('hover');
}).on('mouseleave', function(e){
  $(this).removeClass('hover');
  $('.outer').addClass('hover');
});

Demo

Answer 4

当鼠标进入内层div时，可以移除类悬停在父div上 像这样：

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

  $(this).addClass('hover');
  $(this).parent(".outer").removeClass('hover');

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

  $(this).removeClass('hover');
  $(this).parent(".outer").addClass('hover');

});

我觉得这有点像 hack，可以通过更具体的选择器来改进，而不是只为 .outer 和 .inner 创建一个函数

示例：http://codepen.io/anon/pen/KzILE/