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'); });

la función anterior hará que el DIV aparezca sobre el enlace donde sea que esté en la página. Se desvanecerá lentamente cuando se desplace el enlace. También podría usar .hover() en su lugar. A partir de ahí, el DIV permanecerá, por lo que si desea que el DIV desaparezca cuando el mouse se aleje, entonces,

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

Si su DIV ya está posicionado, simplemente puede usar

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

Además, tenga en cuenta que su estilo DIV debe configurarse para display:none; para que se desvanezca o se muestre.

Hay muchos ejemplos del uso de JQuery para recuperar las coordenadas del mouse, pero ninguno solucionó mi problema.

El cuerpo de mi página web tiene 1000 píxeles de ancho y lo centro en el medio de la ventana del navegador del usuario.

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

Ahora, en mi código JavaScript, cuando el usuario hizo clic derecho en mi página, quería que apareciera un div en la posición del mouse.

El problema es que simplemente usar el valor de e.pageX no fue del todo correcto. Funcionaría bien si cambiara el tamaño de la ventana de mi navegador para que tenga aproximadamente 1000 píxeles de ancho. Entonces, el pop div aparecería en la posición correcta.

Pero si aumentara el tamaño de la ventana de mi navegador a, digamos, 1200 píxeles de ancho, entonces el div aparecería unos 100 píxeles a la derecha de donde el usuario hizo clic.

La solución es combinar e.pageX con el rectángulo delimitador del elemento del cuerpo. Cuando el usuario cambia el tamaño de la ventana de su navegador, el valor " izquierdo " del elemento del cuerpo cambia, y debemos tener esto en cuenta:

 // 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; }); })

Uf. ¡Eso me llevó un tiempo arreglarlo! ¡Espero que esto sea útil para otros desarrolladores!

No necesita crear un $(document).mousemove( function(e) {}) para manejar el mouse x,y. Obtenga el evento en la función $.hover y desde allí es posible obtener las posiciones x e y del mouse. Vea el código a continuación:

 $('foo').hover(function(e){ var pos = [e.pageX-150,e.pageY]; $('foo1').dialog( "option", "position", pos ); $('foo1').dialog('open'); },function(){ $('foo1').dialog('close'); });