Question

I’m trying to write a simple hover preview effect. I’m using the CSS :hover pseudo class to make the larger image appear, and jQuery .mousemove() to track the position of the mouse cursor. The larger image is supposed to appear on hover and follow the mouse cursor.

The problem is that the larger image does not disappear when the mouse is no longer “hover”. It will follow the mouse all over the page for a few seconds before finally going away. It seems to work a little better in IE8, but not in any other browser (IE8 is also giving me positioning problems, but that’s a different issue).

Any help would be appreciated.

Here’s the code:

Answer 1

Just give a little more padding in your offset so that the mouse isn’t hovering over the large image. Check out this jsFiddle

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