Maison > Article > interface Web > Comment changer l'image au survol en utilisant CSS ?
Comment changer l'image au survol en utilisant CSS ?
- 王林avant
- 2023-09-01 10:05:111354parcourir
La pseudo-classe "hover" est utilisée pour sélectionner et appliquer des styles à un élément HTML lorsqu'un utilisateur passe sa souris dessus
.Changer une image en survol avec CSS est un processus simple qui peut ajouter une couche supplémentaire d'interactivité au site Web. Ici, nous apprendrons un guide étape par étape pour modifier une image en survol avec CSS −
.Préparez les images
La première étape pour modifier les images au survol à l'aide de CSS est d'avoir deux images que vous souhaitez utiliser : l'image par défaut et l'image au survol. Assurez-vous que les deux images sont enregistrées sur votre site Web et que vous connaissez l'URL de chaque image.
Ajoutez des images par défaut à votre HTML
Utilisez la balise img et spécifiez la source (src) de l'image. Par exemple -
<img src="Comment changer limage au survol en utilisant CSS ?-image.jpg" alt="Comment changer limage au survol en utilisant CSS ?">
Ajoutez une règle de survol dans votre CSS
Dans le fichier CSS, nous ajoutons une règle pour changer l'image au survol, nous le ferons en ciblant la balise div et en spécifiant une pseudo-classe :hover Par exemple −
.img:hover {
content: url("hover-image.jpg");
}
Exemple
Voici un exemple pour changer l'image au survol en utilisant CSS.
<html>
<head>
<title>Change Image on Hover in CSS</title>
<style>
body{
text-align:center;
}
div {
width: 250px;
height: 195px;
background:
url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
display: inline-block;
}
div:hover {
background:
url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
}
</style>
</head>
<body>
<h2>Change Image on Hover Using CSS</h2>
<div class="card"></div>
</body>
</html>
Conclusion
Utiliser CSS pour modifier les images au survol est un moyen simple et efficace d'ajouter un engagement supplémentaire à votre site Web. Il s'agit d'un excellent moyen de créer une expérience interactive pour les utilisateurs, qui peut les aider à rester plus longtemps sur votre site et à augmenter leur satisfaction globale.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!