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/

有没有办法可以实现它，所以悬停类只应用于直接悬停的元素？即。当鼠标在内部div中时，它只是黄色，而不是外部？

Answer 1

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

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

另一个问题是你必须进入外部并处理它以便甚至到达内部，所以你需要删除必须已经添加到其中的悬停类。父节点。

在this fiddle

中展示

Answer 2

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

Answer 3

当鼠标进入内部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');

});

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

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

Answer 4

您可以通过为每个处理器创建一个单独的处理程序来完成此操作。

$('.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

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

4 个答案: