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

现场演示：链接被移除，因为我的工作得益于用户未定义

如何解决此问题？

提前致谢。

Answer 1

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

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

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

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

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

mouseover（）和mouseout（）使覆盖和控制面板轻弹

1 个答案: