Categorías: jQuery

jQuery mouseover() y mouseout(): Detectar la posición del ratón sobre elementos del DOM

Repaso de las funciones de jQuery mouseover() y mouseout() 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 y todos sus nodos hijos, cada vez que entra el puntero en un nodo hijo se ejecuta esta función.

Veamos su sintaxis extraída de su web oficial:

$(selector).mouseover(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 mouseout()

Función opuesta a la anterior, detecta cuando el ratón deja de estar sobre el elemento seleccionado y sobre sus nodos hijos, cada vez que entra el puntero en un nodo hijo se ejecuta esta función.

Veamos su sintaxis extraída de su web oficial:

$(selector).mouseout(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 mouseover() y mouseout()

Vamos a ver un sencillo ejemplo para ver ambas funciones en funcionamiento:

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

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

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, lo mismo ocurre cuando el puntero abandona dicho div.
Cuando el puntero está dentro del div y accede al nodo hijo (span) se ejecutan a la vez el mouseout (ha abandonado el nodo padre) y el mouseover (ha accedido a un nodo hijo).

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>