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

Nested hover events, only apply to most direct hovered element

本文关键字：悬停 元素 事件 嵌套 适用于      更新时间：2023-09-26

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中时，它是黄色的，而不是外部div？

由于您是通过自己添加类而不是使用CSS :hover来处理悬停，因此在对mouseenter做出反应时，您可以停止处理程序中事件的传播。

这样，如果处理程序对.intern做出反应，它将停止Propagation（），以防止事件也进入.eouter

另一个问题是，您必须输入外部并处理它才能到达内部，因此您将希望删除必须添加到父节点的悬停类。

在这个小提琴中演示

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

您可以通过为每个处理程序制作一个单独的处理程序来实现这一点。

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

演示

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

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

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

相关文章：