How do I position a div relative to the mouse pointer using jQuery?

Question

Suppose I have one link in my page and I want that when I place my mouse just over the link, a div will show there according to mouse x,y.

How can I accomplish this using jQuery?

Answer 1

var mouseX; var mouseY; $(document).mousemove( function(e) {    mouseX = e.pageX;     mouseY = e.pageY; });   $(".classForHoverEffect").mouseover(function(){   $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); }); 

the function above will make the DIV appear over the link wherever that may be on the page. It will fade in slowly when the link is hovered. You could also use .hover() instead. From there the DIV will stay, so if you would like the DIV to disappear when the mouse moves away, then,

$(".classForHoverEffect").mouseout(function(){   $('#DivToShow').fadeOut('slow'); }); 

If you DIV is already positioned, you can simply use

$('.classForHoverEffect').hover(function(){   $('#DivToShow').fadeIn('slow'); }); 

Also, keep in mind, your DIV style needs to be set to display:none; in order for it to fadeIn or show.

Answer 2

There are plenty of examples of using JQuery to retrieve the mouse coordinates, but none fixed my issue.

The Body of my webpage is 1000 pixels wide, and I centre it in the middle of the user's browser window.

body {     position:absolute;     width:1000px;     left: 50%;     margin-left:-500px; } 

Now, in my JavaScript code, when the user right-clicked on my page, I wanted a div to appear at the mouse position.

Problem is, just using e.pageX value wasn't quite right. It'd work fine if I resized my browser window to be about 1000 pixels wide. Then, the pop div would appear at the correct position.

But if increased the size of my browser window to, say, 1200 pixels wide, then the div would appear about 100 pixels to the right of where the user had clicked.

The solution is to combine e.pageX with the bounding rectangle of the body element. When the user changes the size of their browser window, the "left" value of body element changes, and we need to take this into account:

// Temporary variables to hold the mouse x and y position var tempX = 0; var tempY = 0;  jQuery(document).ready(function () {     $(document).mousemove(function (e) {         var bodyOffsets = document.body.getBoundingClientRect();         tempX = e.pageX - bodyOffsets.left;         tempY = e.pageY;     }); })  

Phew. That took me a while to fix ! I hope this is useful to other developers !