¿Cómo coloco un div relativo al puntero del mouse usando jQuery?

Question

Supongamos que tengo un enlace en mi página y quiero que cuando coloque el mouse sobre el enlace, aparezca un div de acuerdo con el mouse x, y.

¿Cómo puedo lograr esto usando 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'); 
}); 

La función anterior hará que el DIV aparezca sobre el enlace donde sea que pueda estar en la página. Se desvanecerá lentamente cuando el enlace esté suspendido. También puede usar .hover() en su lugar. A partir de ahí el DIV se quedará, por lo que si le gustaría que el DIV a desaparecer cuando el ratón se aleja, a continuación,

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

Si DIV ya está colocado, sólo tiene que utilizar

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

también , tenga en cuenta que su estilo DIV debe establecerse en display:none; para que aparezca fadeIn o show.

Answer 2

<script type="text/javascript" language="JavaScript"> 

    var cX = 0; 
    var cY = 0; 
    var rX = 0; 
    var rY = 0; 

    function UpdateCursorPosition(e) { 
    cX = e.pageX; 
    cY = e.pageY; 
    } 

    function UpdateCursorPositionDocAll(e) { 
    cX = event.clientX; 
    cY = event.clientY; 
    } 
    if (document.all) { 
    document.onmousemove = UpdateCursorPositionDocAll; 
    } else { 
    document.onmousemove = UpdateCursorPosition; 
    } 

    function AssignPosition(d) { 
    if (self.pageYOffset) { 
     rX = self.pageXOffset; 
     rY = self.pageYOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     rX = document.documentElement.scrollLeft; 
     rY = document.documentElement.scrollTop; 
    } else if (document.body) { 
     rX = document.body.scrollLeft; 
     rY = document.body.scrollTop; 
    } 
    if (document.all) { 
     cX += rX; 
     cY += rY; 
    } 
    d.style.left = (cX + 10) + "px"; 
    d.style.top = (cY + 10) + "px"; 
    } 

    function HideContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    document.getElementById(d).style.display = "none"; 
    } 

    function ShowContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    dd.style.display = "block"; 
    } 

    function ReverseContentDisplay(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    if (dd.style.display == "none") { 
     dd.style.display = "block"; 
    } else { 
     dd.style.display = "none"; 
    } 
    } 
    //--> 
</script> 


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> 
[show on mouseover, hide on mouseout] 
</a> 
<div id="uniquename3" style="display:none; 
position:absolute; 
border-style: solid; 
background-color: white; 
padding: 5px;"> 
    Content goes here. 
</div> 

Answer 3

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 xey del mouse. Consulte el siguiente código:

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

Answer 4

Existen muchos ejemplos de cómo usar 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 hace clic en el botón derecho del en mi página, que quería un div para aparecer en la posición del ratón.

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

Pero si se aumenta el tamaño de la ventana de mi navegador a, por ejemplo, 1200 píxeles de ancho, entonces el div aparecerá alrededor de 100 píxeles a la derecha 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, la "izquierda " valor de los cambios de elementos del cuerpo, y tenemos que 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. ¡Me tomó un tiempo arreglarlo! ¡Espero que esto sea útil para otros desarrolladores!