悬停时鼠标移动引起闪烁问题

Question

我试图构建一个悬停效果，受到golden-spike.com的启发（实际上是在适应他们的代码）。然而遇到了一些问题，因为他们的代码使用了负z-index，而我不能使用，因为我需要页面有一个背景颜色。

这是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");

  });
});

提前感谢任何帮助！

- Greg Ruben

Answer 1

尝试将图像离光标位置稍微远一些。

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

jsFiddle示例

问题在于鼠标悬停事件触发了覆盖在被悬停文本上的图片。

- im_brian_d

---

我正在使用mouseenter和mousemove事件定位SVG图像，这条评论清楚地解释了为什么我看到闪烁；出现在光标下的图像导致了一个事件循环。我通过将CSS pointer-events: none应用于图像来解决循环问题。 - Patrick Dark

Answer 2

鼠标移动事件被图像元素捕获，该元素关闭悬停状态，如果事件冒泡到标题，则再次触发：

尝试：

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

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

- Dam