Jquery 阻止堆叠元素悬停

Jquery Stop stacked element from hovering out

我一直坚持这个问题。

$(".poster-wrapper.tint").hover(function () {
    $(this).siblings(".controls").slideDown('fast');
}, function (e) {
    //Here is where I need if statement. Only slide up if the poster **and** the controls class is not being hovered on
    $(this).siblings(".controls").slideUp('fast');
});

.controls.poster-wrapper 之上,所以当我将鼠标悬停在海报包装纸上时,它会正确显示控件 class,但是当我将鼠标悬停在控件 class 上时,它们显然再次滑开,因为海报不再悬停。我该如何阻止这种不受欢迎的行为?

我查看了此处的其他线程,但仍然无法解决多个元素的问题。

Jsfiddle:https://jsfiddle.net/9dzfys87/

我在另一个 Whosebug 问题 here 上找到了解决方案。

pointer-events: none; 添加到您的 .controls class。

.controls{
  pointer-events: none;
  /* other properties */
}

已更新 fiddle

-- 更新以使用点击事件 --

将一个 div 放在另一个里面

 <div class="poster-wrapper tint">
      <div class="controls"></div>
    </div>

JSFiddle