Uso de la funcion hover jQuery

Uso de hover en jQuery a partir de la versión 1.4

Uso de la funcion hover jQuery

Uso de la función hover en jQuery para programadores en javascript , uso adecuado y consejos de como implementarlo en tus lineas de código del día a día

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>

 

No hay descargable

Redactado por: , Leido 975 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021