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


jQuery hover(): Detectar la presencia del cursor en elementos

Sencillo post sobre jQuery hover() para detectar la presencia del cursor sobre los diferentes elementos del DOM de una web.

Esta función de jQuery es muy parecida a las 2 siguientes:

Sintaxis de jQuery hover()

Veamos la sintaxis de extraída de su web oficial:

Os comento los parámetros de hover():

  • selector (Obligatorio): Elemento donde queremos detectar la presencia del cursor del ratón.
  • inFunction (Obligatorio): Función a ejecutarse cuando el cursor está encima del elemento indicado.
  • outFunction (Opcional): Función callback a ejecutarse cuando el cursor ya no está encima del elemento indicado.

Ejemplo de jQuery hover()

Vamos a ver en este ejemplo de hover() la funcionalidad de la función:

Os explico el código superior:

  • Detectamos la presencia del ratón sobre el elemento con id = ‘prueba’, en este caso es el rectángulo gris.
  • Cuando el ratón se sitúa sobre el elemento cambiamos su color de fondo a negro –> #000000.
  • Cuando el ratón ya no está sobre el elemento cambiamos su color de fondo a gris –> #C3C3C3.

El código HTML del rectángulo 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