带有 :hover 的 jQuery .mousemove()答案

【问题标题】：jQuery .mousemove() with :hover带有 :hover 的 jQuery .mousemove()
【发布时间】：2012-08-01 22:53:20
【问题描述】：

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

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

任何帮助将不胜感激。

Here's the code：

【问题讨论】：

看看这个小提琴jsfiddle.net/elclanrs/jF27b

标签： jquery css hover mousemove

【解决方案1】：

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

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

【讨论】：

+20 看起来还是有点不靠谱，所以我用了+40，它就像一个魅力。谢谢！

【解决方案2】：

似乎悬停效果跟不上鼠标移动的速度。您可能需要做的不是纯粹依赖: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');
   }
});

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：