与mousemove鼠标悬停闪烁

我试图建立一个灵感来自golden-spike.com（并调整他们的代码，实际上）的悬停效果。虽然有一些麻烦，因为他们的代码使用负Z指数，我不能使用，因为我需要在页面上有背景颜色。与mousemove鼠标悬停闪烁

这里是jsFiddle。您会注意到，如果将.show_img类的z-index更改为-1，则闪烁会完全消失。

这里的JavaScript我目前使用：

$(document).ready(function() { 
var mouseX; 
var mouseY; 
$(".title").mousemove(function(e) { 
    mouseX = e.clientX; 
    mouseY = e.clientY; 
}); 
$(".title").hover(
    function() { 
    $(this).next(".show_img").css("visibility","visible"); 
    $(window).bind('mousemove', function(e){ 
     $(".title").next(".show_img").css({'top':mouseY,'left':mouseX}); 
    }); 
    }, 
    function() { 
    $(".show_img").css("visibility","hidden"); 

    }); 
});

在此先感谢您的帮助！

来源

2014-08-27 Greg Ruben

尝试将图像从光标定位远一点

mouseX = e.clientX + 5; 
mouseY = e.clientY + 5;

jsFiddle Example

的问题是，悬停事件引发了覆盖正在徘徊的文本的图像。

来源

2014-08-27 20:10:51

完全解决了！谢谢！ – 2014-08-27 20:13:09

我使用'mouseenter'和'mousemove'事件定位了一幅SVG图像，这个评论清楚地说明了我为什么看到闪烁的原因;出现在光标下的图像正在导致事件循环。我通过将CSS'pointer-events：none'应用于图像来解决循环问题。 – 2017-03-19 13:19:42

鼠标移动事件，但果然悬停关闭图像元件拍摄，如果它泡到标题它的再次发射：

尝试：

$(".title").next(".show_img").css({'top':mouseY+10,'left':mouseX+10});

DEMO http://jsfiddle.net/tNms9/423/

来源

2014-08-27 20:22:48 Dam

与mousemove鼠标悬停闪烁

回答

相关问题