jquery - mouseover() 和 mouseout() 使覆盖和控制面板轻弹

Question

我正在使用以下代码，但是当我将指针悬停在图像上时，覆盖层和控件会闪烁。我已经测试过了mouseenter()，hover()但它也随着这些闪烁。

$('.image-photo').mouseover(function() {
    $('.image-photo-overlay').show();
    $('.image-photo-controls').show();
});

$('.image-photo').mouseout(function() {
    $('.image-photo-overlay').hide();
    $('.image-photo-controls').hide();
});

现场演示：链接被删除，因为我得到它的工作感谢用户 undefined

我该如何解决这个问题？

提前致谢。

Answer 1

您可以选择包装元素，当元素显示时，mouseout触发事件。

$('.background').hover(function() {
    $('.image-photo-overlay, .image-photo-controls').toggle();
});

其他选项是使用 CSSpointer-events属性：

.image-photo-overlay, .image-photo-controls {
   pointer-events: none;
}

$('.image-photo').hover(function() {
    $(this).siblings().toggle();
});