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:
1 |
$(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:
1 |
$(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:
1 2 3 4 5 6 7 8 9 |
$(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:
1 2 3 4 5 |
<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> |
Otras funciones para detectar los eventos del ratón
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: