Jquery停止堆叠元素从悬停

Question

我已经坚持了很久。

$(".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之上，所以当我将鼠标悬停在海报包装器上时，它会正确显示控件类，但当我将鼠标悬停在控件类上时，它们会再次滑落，因为海报不再显示被徘徊。如何阻止这种不受欢迎的行为？

我在这里查看了其他线程，但仍然无法解决多个元素。

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

Answer 1

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

将pointer-events: none;添加到您的.controls课程。

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

更新了fiddle。

- 更新以使用点击事件 -

将一个div放在另一个

中

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

JSFiddle