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

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

Answer 2

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

尝试：

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

<强>样本 http://jsfiddle.net/tNms9/423/

使用mousemove悬停时闪烁

2 个答案: