Qu'est-ce que le survol CSS ?

Le sélecteur :hover en CSS applique des styles à un élément pendant que le curseur le survole. Il est fréquemment utilisé pour produire des effets interactifs ou pour attirer l'attention sur des éléments lorsqu'ils interagissent avec eux.

disquette

Vous pouvez cibler un élément avec le sélecteur :hover en utilisant son nom de balise, sa classe ou son ID.

Par exemple:

 .button:hover { background-color: #ff0000; color: #ffffff; } 

La couleur d'arrière-plan de l'exemple précédent deviendra rouge (#ff0000) lorsqu'un utilisateur survolera un élément avec la classe « bouton », tandis que la couleur du texte deviendra blanche (#ffffff).

Divers effets de survol peuvent être produits en combinant le sélecteur :hover avec d'autres éléments CSS comme la taille de la police, la bordure ou la transformation. Il s'agit d'un outil puissant pour améliorer le retour visuel et l'interactivité de votre site Web ou de votre application.

Syntaxe:

 :hover { css declarations; } 

Prenons quelques exemples pour comprendre le survol en utilisant CSS :

Exemple 1:

Code HTML:

 Hover Me 

Code CSS :

comparaison de chaîne Java

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Explication:

Dans l'exemple ci-dessus, nous avons un bouton avec un bouton de survol de classe. Les combinaisons de couleurs initiales du bouton sont un fond gris clair (#eaeaea) et un texte gris foncé (#333333). Lorsque la souris survole le bouton, la couleur de fond passe au rouge (#ff0000) et la couleur du texte au blanc (#ffffff).

Avec une durée de 0,3 seconde et une fonction de synchronisation simplifiée, la propriété de transition de la classe hover-button assure une transition fluide pour le changement de couleur d'arrière-plan lorsque la souris survole le bouton.

contient la sous-chaîne java

D'autres éléments, tels que des liens ( ), images ( ), les divs ( ) ou tout autre élément que vous souhaitez rendre interactif, peuvent utiliser des effets de survol similaires. Vous pouvez créer divers effets de survol adaptés à vos besoins de conception en modifiant les propriétés et les valeurs dans le sélecteur :hover.

Exemple 2 : effet de zoom d'image

Code HTML:

Code CSS :

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Exemple 3 : Effet de soulignement du lien

Code HTML:

 <a href="#">Hover Me</a> 

Code CSS :

comment récupérer des applications cachées

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Fonctionnalité de Hover en CSS

Vous pouvez améliorer l'interactivité et les effets visuels de vos pages Web en utilisant la fonctionnalité CSS:hover, qui offre une variété d'avantages et de fonctionnalités. Voici quelques fonctionnalités essentielles du survol CSS :

Effet interactif :Des effets interactifs peuvent être produits en modifiant l'apparence des éléments lors du survol à l'aide du sélecteur :hover. Au fur et à mesure que les utilisateurs interagissent avec votre contenu, vous pouvez modifier des propriétés telles que la couleur d'arrière-plan, la couleur du texte, l'opacité, l'ombre de la boîte, la transformation, etc. pour leur montrer un retour visuel.Cibler plusieurs éléments :Vous pouvez sélectionner plusieurs éléments sur une page avec le sélecteur :hover. Cela implique que vous pouvez concevoir des effets de survol standardisés pour divers éléments, notamment des boutons, des liens, des images, des menus de navigation et tout autre élément que vous souhaitez rendre interactif.Prise en charge des transitions et des animations :Le sélecteur :hover peut être utilisé avec des transitions et des animations CSS pour produire des effets élégants et esthétiques. En définissant les propriétés de transition ou d'animation, vous pouvez spécifier la durée, la fonction de synchronisation et d'autres paramètres liés à l'animation pour réguler la façon dont les styles changent lorsqu'un élément est survolé.Ajout de sélecteurs supplémentaires :Le sélecteur :hover peut être utilisé avec d'autres sélecteurs CSS pour se concentrer sur des éléments particuliers ou appliquer des styles selon des critères prédéfinis. Par exemple, vous pouvez créer des effets de survol uniques et personnalisés en combinant le sélecteur :hover avec des sélecteurs de classe, des sélecteurs d'ID ou des pseudo-éléments.Prise en charge de l'accessibilité :L'accessibilité doit être prise en compte lors du développement des effets de survol. Les utilisateurs de technologies d'assistance qui utilisent un curseur, comme les lecteurs d'écran, peuvent ne pas avoir accès à l'effet de survol. Pour cette raison, il est conseillé de vérifier que la fonctionnalité ou le contenu principal est toujours lisible et utilisable sans effets de survol.Prise en charge multi-navigateurs :La plupart des navigateurs Web modernes prennent en charge la fonctionnalité CSS : hover. Il s'agit d'un composant de spécification CSS compatible avec les navigateurs les plus utilisés, notamment Chrome, Firefox, Safari, Edge et autres. Cela garantit la cohérence de l’apparence et du comportement sur les différentes plates-formes.