Comment changer l'image au survol en utilisant CSS ?-tutoriel CSS-php.cn

Comment changer l'image au survol en utilisant CSS ?

王林

Libérer： 2023-09-01 10:05:11

avant

1429 Les gens l'ont consulté

如何使用 CSS 更改悬停时的图像？

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 ?">

Copier après la connexion

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");
}

Copier après la connexion

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>

Copier après la connexion

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!