jquery - JQuery mouseenter 处理程序可以忽略一个元素

Question

我有一种情况，一系列重叠的 div 带有阴影效果。使用 position:absolute，它们会在最后一个 div 上产生阴影效果。

问题是每个 div 都有一个分配给它的鼠标输入功能。所以用户可以让鼠标悬停在一个上面，但是因为它正在触摸另一个的影子，另一个触发了它的功能。

有没有办法告诉它完全忽略阴影作为鼠标输入功能的触发器，而只使用 div 本身。

<div class="hoop"><div class="shadow"></div></div>
<div class="hoop"><div class="shadow"></div></div>
<div class="hoop"><div class="shadow"></div></div>
<div class="hoop"><div class="shadow"></div></div>
<div class="hoop"><div class="shadow"></div></div>

.hoop {
   float:left;
   width:200px;
   height:400px; position:relative
}
.shaddow {
   position:absolute; left:-70px;
}

试试看

Answer 1

如果它们是绝对定位的并且一个在另一个之上，则 mouseenter 处理程序只针对顶部元素（具有最高 z-index 的那个）关闭，除非 div 彼此位于内部。