Uso de la función hover jQuery

A partir de jQuery 1.4, ahora podemos pasar solo una función al método hover. Antes, se requerían los métodos de entrada y salida.

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()

$(document).ready(function(){
	$("#prueba").hover(function(){
		$("#prueba").css("background-color", "#000000");
		}, function(){
			$("#prueba").css("background-color", "#C3C3C3");
		});
});

Explicación 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:

<div id="prueba" style="height:200px; width:500px; background-color:#C3C3C3; padding:50px 50px 50px 50px;"></div>

Leido 2758 veces | 1 usuarios