jquery - 使用 mousemove 在悬停时闪烁

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

  });
});

在此先感谢您的帮助!

Answer 1

尝试将图像放置在离光标稍远的位置

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

jsFiddle Example

问题是悬停事件触发了覆盖悬停文本的图像。