Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

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:

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:

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:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies