El enfoque de este artículo es cambiar una imagen cuando el usuario pasa el mouse sobre ella. Esta tarea se puede hacer simplemente usando la propiedad CSS background-image en combinación con la pseudo-clase : hover para reemplazar o cambiar la imagen al pasar el mouse.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Change Image on
Hover in CSS
</title>
<style>
.sudo {
width: 230px;
height: 195px;
margin: 50px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
}
.sudo:hover {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
How to change image on
hover with CSS
</h2>
<div class="sudo"></div>
</body>
</html>
Producción:
Antes de pasar el mouse sobre la imagen:
Después de pasar el mouse sobre la imagen:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA