jQuery Overlay Hover Flashing Issue

Question

当img悬停时，我想这样做，就会出现一个叠加层。它工作正常，但它一直闪烁。我在这里搜索过，人们似乎遇到了同样的问题;但是，解决方案涉及.toggle()，已被折旧。

$(".box img").mouseenter(function(){
        $(this).next(".overlay").fadeIn(300);
    }).mouseleave(function(){
        $(this).next(".overlay").fadeOut(300);
});

这是Fiddle。

Answer 1

发生这种情况的原因是因为当.overlay div淡入时，它会进入鼠标光标和基础img元素之间，从而触发.mouseleave函数。

可能有几种解决方法，但这里有一个：

将opacity: 0添加到.overlay课程。然后在你的JS中使用它：

$(".box .overlay").mouseenter(function(){
    $(this).animate({opacity: 1}, 300)
}).mouseleave(function(){
    $(this).animate({opacity: 0}, 300)
});

fiddle link（已更新）。