鼠标悬停时闪烁答案

【问题标题】：Flickering on hover with mousemove鼠标悬停时闪烁
【发布时间】：2014-10-21 13:34:22
【问题描述】：

我正在尝试构建一个受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");

  });
});

提前感谢您的帮助！

【问题讨论】：

标签： jquery html css hover mousemove

【解决方案1】：

尝试将图像定位在离光标稍远一点的位置

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

jsFiddle Example

问题在于悬停事件触发了一个图像，该图像覆盖了被悬停的文本。

【讨论】：

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

【解决方案2】：

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

试试：

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

演示 http://jsfiddle.net/tNms9/423/

【讨论】：