Question

我有一个图像，播放/暂停按钮位于绝对位置并居中于顶部。

当用户将鼠标悬停在img上时按钮出现，当鼠标离开图像时消失。

当用户将鼠标悬停在按钮上时，我遇到的问题是闪烁，我怀疑是因为图像鼠标移出事件已被触发。

我知道问题是什么，导致什么问题，但我无法修复它。我不想嵌套暂停播放按钮，以使其工作。我只需要管理一些冒泡事件......

谢谢，凸轮

Answer 1

将.mouseenter事件添加到$('#pauseplay')，这会在悬停时取消动画：

$('#pauseplay').mouseenter(function(){
    $(this).stop(false,false);
}).hide();

演示：http://jsfiddle.net/GuJWk/11/

此外，$().hover(fn1, fn2)是$().mouseenter(fn1).mouseleave(fn2)的缩写。

Answer 2

这会解决您的问题吗？

http://jsfiddle.net/eHerL/

$("body").on("mouseover", "img", function(){
    $('#pauseplay').stop(true,true).fadeIn(1000);
}).mouseleave(function(){
    $('#pauseplay').stop(true,true).fadeOut(1000);
});

JQuery - 如何抑制mouseleave事件？

2 个答案:

演示：http://jsfiddle.net/GuJWk/11/