jQuery.mousemove（）和：hover

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

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

任何帮助都将不胜感激

---

：

我想看看这家伙在这里做了什么：

例如：

---

代码：

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

---

似乎悬停效果没有足够快地跟上鼠标的移动。与单纯依赖于

：hover

不同，您可能需要做的是使用一个

.mouseout

回调来删除图像，该回调有一个超时（一些正常的量..可能是500），以及一个重置超时的

.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');
   }
});

---

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

---

无论如何，你的问题是你的大图像嵌套在你的列表中，所以当你在悬停它时，你仍然在悬停你的原始项目。

看看这个提琴+20似乎仍然有点不稳定，所以我使用+40，它就像一个符咒。非常感谢。

$(".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');
   }
});