El objetivo de este manual es explorar cómo cambiar una imagen al pasar el mouse usando CSS. ¡Vamos a empezar!
¿Qué es: hover en CSS?
El :hover es un elemento de pseudoclase que se usa para cambiar el estado de los elementos HTML cuando un mouse lo activa. Este selector de CSS se utiliza principalmente para diseñar o seleccionar elementos. Sin embargo, no se puede aplicar a los enlaces.
Sintaxis
La sintaxis de :hover se da a continuación:
elemento : flotar {
Código CSS. . .
}
Aquí, ' elemento ” se refiere al elemento en el que desea aplicar el efecto de desplazamiento.
Ahora, pasaremos al ejemplo práctico de cambiar la imagen al pasar el mouse usando CSS.
Ejemplo: ¿Cómo cambiar la imagen al pasar el mouse usando CSS?
Para cambiar la imagen al pasar el mouse primero, agregue dos imágenes en la sección HTML. La primera imagen es para el estado activo y la siguiente es para el estado flotante.
Paso 1: Agregar imágenes
Para el propósito especificado, agregaremos dos imágenes, “ imagen1 ' y ' imagen2 ”, y asigne el nombre de la clase a la segunda imagen como “ hover_img ”.
HTML
< cuerpo >< división clase = 'img' >
< imagen origen = 'imagen1.png' >
< imagen origen = 'imagen2.png' clase = 'hover_img' >
< / división >
< / cuerpo >
Paso 2: Imágenes de estilo
Ahora, muévase al CSS para establecer la posición de ambas imágenes usando “ posición ' propiedad. Estableceremos su posición como “ absoluto ” para posicionarlo absolutamente con referencia a su padre más cercano.
CSS
.img {posición : absoluto ;
}
Esto mostrará el siguiente resultado:
En el siguiente paso, colocaremos la segunda imagen delante de la primera. Para ello, estableceremos la posición de la imagen como “ absoluto ” y establezca la posición superior e izquierda como “ 0 ”. El uso de esta imagen se coloca delante de la primera imagen, pero queremos mostrar la segunda imagen cuando se pasa el mouse sobre ella. Por lo tanto, establecer el valor de visualización como ' ninguna ” mostrará el resultado deseado:
.hover_img {posición : absoluto ;
parte superior : 0 ;
izquierda : 0 ;
monitor : ninguna ;
}
La salida del código dado es la siguiente:
La segunda imagen se oculta con éxito detrás de la primera imagen.
Ahora, vaya al siguiente paso.
Paso 3: cambiar la imagen al pasar el mouse
A continuación, utilice “ :flotar ” y seleccione “ .img ” para aplicar el desplazamiento al elemento seleccionado. Luego, asigne el nombre de clase de la segunda imagen “ .hover_img ”. Después de eso, dentro de los paréntesis, establezca el valor de la propiedad de visualización como ' en línea ” que obligará al elemento a encajar en la misma línea:
.img : flotar .hover_img {monitor : en línea ;
}
Aquí está el resultado que demuestra que la imagen cambia cuando el usuario pasa el mouse sobre ella:
El resultado anterior indica que hemos cambiado con éxito la imagen al pasar el mouse usando CSS.
Conclusión
La imagen se puede cambiar al pasar el mouse usando el botón ' :flotar ” elemento de pseudoclase. Para hacerlo, agregue las imágenes requeridas en el archivo HTML, colóquelas en la misma posición usando CSS y aplique el selector :hover sobre ellas. Como resultado, la primera imagen cambiará al pasar el cursor sobre ella. En este artículo, hemos explicado cómo cambiar una imagen al pasar el mouse usando el :hover con un ejemplo práctico.