L'objectif de ce manuel est d'explorer comment modifier une image au survol à l'aide de CSS. Alors, commençons !
Qu'est-ce que :hover en CSS ?
Le :hover est un élément de pseudo-classe utilisé pour changer l'état des éléments HTML lorsqu'une souris le déclenche. Ce sélecteur CSS est principalement utilisé pour styliser ou sélectionner des éléments. Cependant, il ne peut pas être appliqué aux liens.
Syntaxe
La syntaxe de :hover est donnée ci-dessous :
élément : flotter {
Code CSS. . .
}
Ici, ' élément ” fait référence à l'élément dans lequel vous souhaitez appliquer l'effet de survol.
Passons maintenant à l'exemple pratique de modification de l'image au survol à l'aide de CSS.
Exemple : Comment changer l'image au survol à l'aide de CSS ?
Pour modifier d'abord l'image au survol, ajoutez deux images dans la section HTML. La première image correspond à l'état actif et la suivante à l'état de survol.
Étape 1 : Ajouter des images
Dans le but spécifié, nous ajouterons deux images, ' image1 ' et ' image2 ', et attribuez le nom de classe à la deuxième image comme ' hover_img ”.
HTML
< corps >< div classer = 'img' >
< image src = 'image1.png' >
< image src = 'image2.png' classer = 'hover_img' >
< / div >
< / corps >
Étape 2 : styliser les images
Maintenant, passez au CSS pour définir la position des deux images en utilisant ' position ' propriété. Nous fixerons sa position comme « absolu » pour le positionner absolument par rapport à son parent le plus proche.
CSS
.img {position : absolu ;
}
Cela affichera le résultat suivant :
Dans l'étape suivante, nous placerons la deuxième image devant la première. Pour ce faire, nous allons définir la position de l'image comme ' absolu ' et définissez la position supérieure et gauche sur ' 0 ”. L'utilisation de cette image est placée devant la première image, mais nous souhaitons afficher la deuxième image lorsqu'une souris passe dessus. Ainsi, en définissant la valeur d'affichage sur ' rien ” affichera le résultat souhaité :
.hover_img {position : absolu ;
Haut : 0 ;
la gauche : 0 ;
affichage : rien ;
}
La sortie du code donné est la suivante :
La deuxième image est masquée avec succès derrière la première image.
Maintenant, passez à l'étape suivante.
Étape 3 : Modifier l'image au survol
Ensuite, utilisez ' :flotter ' et sélectionnez ' .img ” pour appliquer le survol à l'élément sélectionné. Ensuite, attribuez 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é display comme ' en ligne ' qui forcera l'élément à tenir dans la même ligne :
.img : flotter .hover_img {affichage : en ligne ;
}
Voici le résultat qui démontre que l'image est modifiée lorsque l'utilisateur la survole :
La sortie ci-dessus indique que nous avons réussi à modifier l'image au survol à l'aide de CSS.
Conclusion
L'image peut être changée au survol en utilisant le ' :flotter ” élément de pseudo-classe. Pour ce faire, ajoutez les images requises dans le fichier HTML, placez-les dans la même position à l'aide de CSS et appliquez-leur le sélecteur :hover. Par conséquent, la première image changera lorsque vous la survolerez. Dans cet article, nous avons expliqué comment changer une image au survol en utilisant le :hover avec un exemple pratique.