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

mousemove 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

Hay muchos ejemplos de 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 aparezca un div en la posición del mouse.

El problema es que el solo uso del valor de e.pageX 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 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 alrededor de 100 píxeles a la derecha de donde el usuario había hecho 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 "a la izquierda " 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. ¡Me tomó un tiempo arreglarlo! ¡Espero que esto sea útil para otros desarrolladores!

Answer 2

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

Answer 3

<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 4

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 el enlace esté suspendido. También puede 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 tu DIV ya está posicionado, puedes simplemente 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.