How can you place a div over a mouse with jQuery?

Question by Frank: How can you place a div over a mouse with jQuery?
Ok so let me explain. Lets say there is a small image and when you hover over it, there will be a new and much larger image (an enlarge version of the image). Thats easy, but wait! I want the larger image to be right on top of the smaller image and when you hover out of the smaller image, the div goes away. The problem is that when you display the larger image on top of the smaller image, the mouse is hovering over the larger image and not the small image. I want to make it so that the mouse stays hovering on the small image while having the larger image on top if it.

Best answer:

Answer by fantabulum
I would capture the mouse position and detect when the mouse is outside the smaller image’s page offset.

Edit:
======
I just thought of something easier. Put the image and the aboslute (larger) image in the same div and set the onmouseover event on the div. The div will not see absolutely positioned objects as being a part of it’s hover event.

Know better? Leave your own answer in the comments!

Revisions

There are no revisions for this post.

Tags: , , ,

No comments yet.

Leave a Reply