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:
1 |
$(selector).hover(inFunction, outFunction) |
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:
1 2 3 4 5 6 7 |
$(document).ready(function(){ $("#prueba").hover(function(){ $("#prueba").css("background-color", "#000000"); }, function(){ $("#prueba").css("background-color", "#C3C3C3"); }); }); |
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:
1 |
<div id="prueba" style="height:200px; width:500px; background-color:#C3C3C3; padding:50px 50px 50px 50px;"></div> |
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: