CODEWITHSUNDEEP
jquerycsshovermousemove
user1380281
user1380281

Reputation: 299

jQuery .mousemove() with :hover

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:

Upvotes: 1

Views: 1656

Answers (4)

Neil
Neil

Reputation: 55392

It would have been nice if you'd formatted your HTML instead of dumping it into jsfiddle in one long string.

Anyway your problem is that your large image is nested inside of your list so that when you're hovering it you're also still hovering your original item.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

It seems that the hover effect just does not catch up with mouse movements fast enough. Instead of relying purely on :hover, what you may need to do is have a .mouseout callback that has a timeout (some sane amount .. probably 500) to remove the image, and a .mouseover that resets the timeout (you can store the timeout on .data of the hovered image -- the image with the callback).

I haven't delved into your code, but here is some pseudo-code to explain what I mean

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

Upvotes: 1

Amin Eshaq
Amin Eshaq

Reputation: 4024

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;

Upvotes: 1

TimmyTooTall
TimmyTooTall

Reputation: 26

I would take a look at what this guy has done here:

Example: http://cssglobe.com/lab/tooltip/03/ Code: http://cssglobe.com/lab/tooltip/03/main.js

Upvotes: 0

Related Questions