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 hover en jQuery a partir de la versión 1.4

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>

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Uso de la funcion hover jQuery?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 128 veces | Publicado hace 6 meses

Más códigos de programación en JQUERY.

Ver scripts de JQUERY

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en JQUERY

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019