jquery - 带有 :hover 的 jQuery .mousemove()

Question

我正在尝试编写一个简单的悬停预览效果。我正在使用 CSS :hover 伪类来显示更大的图像，并使用 jQuery .mousemove() 来跟踪鼠标光标的位置。较大的图像应该出现在悬停并跟随鼠标光标。

问题是当鼠标不再“悬停”时，较大的图像不会消失。它会在整个页面上跟随鼠标几秒钟，然后最终消失。它似乎在 IE8 中工作得更好，但在任何其他浏览器中都没有（IE8 也给我定位问题，但这是一个不同的问题）。

任何帮助，将不胜感激。

这是代码：

Answer 1

只需在偏移量中多加一点填充，这样鼠标就不会悬停在大图像上。看看这个jsFiddle

 var relX = pageX - parentOffset.left +20;
 var relY = pageY - parentOffset.top+20; 

Answer 2

似乎悬停效果跟不上鼠标移动的速度不够快。您:hover可能需要做的不是.mouseout纯粹依靠image -- 带有回调的图像）。.mouseover.data

我没有深入研究你的代码，但这里有一些伪代码来解释我的意思

$(".big-img-that-follows-mouse").mouseout(function () {
   var $this = $(this);
   //You can also .hide() or whatever instead of .remove()
   $this.data('timeout', setTimeout(function () { $this.remove(); }), 500));
})
.mouseover(function () {
   if ($(this).data('timer') {
      clearTimeout($(this).data('timer'));
      $(this).removeData('timer');
   }
});

Answer 3

我会看看这个人在这里做了什么：

示例：http ://cssglobe.com/lab/tooltip/03/ 代码：http ://cssglobe.com/lab/tooltip/03/main.js

Answer 4

如果您对 HTML 进行格式化而不是将其以一个长字符串形式转储到 jsfiddle 中，那就太好了。

无论如何，您的问题是您的大图像嵌套在列表中，因此当您将其悬停时，您也仍然悬停在原始项目上。