Comment changer d'image sur planant en utilisant CSS

Le survol est une technique qui utilise un dispositif de pointage pour interagir avec l'élément. Il peut être utilisé pour sélectionner ou styliser divers éléments CSS tels que les boutons, les images, les menus et bien d'autres. L'application de volante sur un élément changera son état lorsqu'une souris déclenche l'événement spécifié.

L'objectif de ce manuel est d'explorer comment changer une image sur le plan en utilisant CSS. Alors, commençons!

Qu'est-ce que: planer dans CSS?

Le: Hover est un élément de pseudo-classe utilisé pour changer l'état des éléments HTML lorsqu'une souris la déclenche. Ce sélecteur CSS est principalement utilisé pour style ou sélectionner des éléments. Cependant, il ne peut pas être appliqué aux liens.

Syntaxe

La syntaxe de: survol est donnée ci-dessous:

élément: Hover
Code CSS…

Ici, "élément»Fait référence à l'élément dans lequel vous souhaitez appliquer l'effet de survol.

Maintenant, nous allons passer à l'exemple pratique de la modification de l'image sur le plan en utilisant CSS.

Exemple: comment changer l'image sur planant en utilisant CSS?

Pour modifier l'image sur planant d'abord, ajoutez deux images dans la section HTML. La première image est pour l'état actif, et le suivant est pour l'état de survol.

Étape 1: Ajouter des images

À des fins spécifiées, nous ajouterons deux images, "image1" et "image2», Et affectez le nom de classe à la deuxième image comme«hover_img".

Html

Étape 2: Images de style

Maintenant, passez au CSS pour définir la position des deux images en utilisant «position" propriété. Nous allons définir sa position de «absolu"Pour le positionner absolument en référence à son parent le plus proche.

CSS

.img
Position: absolue;

Cela montrera le résultat suivant:

À l'étape suivante, nous définirons la deuxième image devant la première. Pour ce faire, nous définirons la position de l'image comme «absolu»Et réglez la position du haut et de la gauche comme«0". L'utilisation de cette image est placée devant la première image, mais nous voulons afficher la deuxième image lorsqu'un plan de souris plane dessus. Donc, définir la valeur d'affichage comme «aucun«Montrera le résultat souhaité:

.hover_img
Position: absolue;
en haut: 0;
à gauche: 0;
Affichage: aucun;

La sortie du code donné est la suivante:

La deuxième image est cachée avec succès derrière la première image.

Maintenant, passez à l'étape suivante.

Étape 3: Modifiez l'image sur planant

Ensuite, utilisez ":flotter"Et sélectionnez".IMG”Pour appliquer un volant à l'élément sélectionné. Ensuite, affectez le nom de classe de la deuxième image ".hover_img". Après cela, à l'intérieur des parenthèses, définissez la valeur de la propriété d'affichage comme «en ligne«Ce qui obligera l'élément à s'adapter dans la même ligne:

.IMG: planant .hover_img
Affichage: en ligne;

Voici le résultat qui démontre que l'image est modifiée lorsque l'utilisateur plane dessus:

La sortie fournie ci-dessus indique que nous avons réussi à changer l'image sur planant à l'aide de CSS.

Conclusion

L'image peut être modifiée en survol en utilisant le «:flotter”Élément pseudo-classe. Pour ce faire, ajoutez les images requises dans le fichier HTML, définissez-les dans la même position à l'aide de CSS et appliquez le sélecteur: oscillez-vous dessus. En conséquence, la première image changera lorsqu'il planera dessus. Dans cet article, nous avons expliqué comment changer une image sur le plan de survol en utilisant: Hover avec un exemple pratique.