jQuery .mousemove（）with：hover

Question

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

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

任何帮助都将不胜感激。

Here's the code：

Answer 1

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

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

Answer 2

似乎悬停效果不能足够快地赶上鼠标移动。您可能需要做的事情是：:hover回调具有超时（一些理智的数量......可能是500）来删除图像，而不是完全依赖于.mouseout，而.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中，那就太好了。

无论如何，你的问题是你的大图像嵌套在你的列表中，这样当你盘旋它时你仍然在盘旋原始项目。