Categorías: jQuery

jQuery mouseenter() y mouseleave(): Detectar la posición del ratón sobre elementos del DOM

Repaso de las funciones de jQuery mouseenter() y mouseleave() para detectar la posición del ratón sobre los diferentes elementos del DOM. Muy similar a la función hover().

Otras funciones de jQuery que detectan eventos del ratón son click(), dblclick(), blur() y focus().

Diferencias entre mouseover()/mouseout() y mouseenter()/mouseleave()

Quizás podamos usar estas funciones sin ningún problema y que nos funcionen como es debido. Pero no está de menos saber las diferencias entre ellas:

mouseover() – mouseout(): Engloba a todos los nodos hijos que contenga el elemento seleccionado del DOM, cada vez que el puntero entra y sale del elemento y nodos hijos se ejecutan las funciones.
mouseenter() – mouseleave(): No engloba a los nodos hijos que contenga, es decir, solo se ejecutarán con el elemento seleccionado cuando entre o salga del mismo.

Sintaxis de jQuery mouseover()

Con esta función detectamos el posicionamiento del ratón sobre un elemento del DOM, sin incluir sus nodos hijos, si se entra en un nodo hijo la función no se ejecuta.

Veamos su sintaxis extraída de su web oficial:

$(selector).mouseenter(funcion)

Os explico la sintaxis:

selector (obligatorio): Elemento del DOM donde queremos detectar la presencia del ratón.
funcion (opcional): Función callback a ejecutar cuanto el ratón se situa sobre el elemento.

Sintaxis de jQuery mouseleave()

Función opuesta a la anterior, detecta cuando el ratón deja de estar sobre el elemento seleccionado y sale de él, no se ejecuta cuando el ratón abandona un nodo hijo del selemento.

Veamos su sintaxis extraída de su web oficial:

$(selector).mouseleave(funcion)

Os explico la sintaxis:

selector (obligatorio): Elemento del DOM donde queremos controlar.
funcion (opcional): Función callback a ejecutar cuanto el ratón deja de estar sobre el elemento.

Ejemplos de jQuery mouseenter() y mouseleave()

Vamos a ver un sencillo ejemplo para ver ambas funciones en acción:

$(document).ready(function(){
 $("#prueba").mouseenter(function(){
      alert("El ratón está sobre el div negro");
   });

 $("#prueba").mouseleave(function(){
      alert("El ratón ya no está sobre el div negro");
  });
});

Os explico el ejemplo:

He creado un div con id = ‘prueba’ dentro de un párrafo, dentro del div he creado un span (nodo hijo).
Cuando el puntero está sobre el div sale un mensaje por pantalla, pero no ocurre lo mismo al entrar al nodo hijo.
El mensaje que advierte de que se ha salido del elemento se ejecutará al salir del elemento seleccionado.

El código HTML del párrafo es el siguiente:

<p>
<div id="prueba" style="height:100px; background-color:#000000; padding:30px 30px 30px 30px;">
 <span style="height:30px; background-color:#dddddd; color:#000000; padding:5px 5px 5px 5px;">Prueba a mover el ratón sobre este texto</span>
</div>
</p>