Summary  
This chapter explains how to use the CSS :hover pseudo-class to apply dynamic style changes to elements when the mouse pointer hovers over them.  

General domain of usage  
Web user interfaces

Watch this demonstration to see how the :hover pseudo-class changes the appearance of buttons and links when you move your mouse over them. You'll observe how CSS hover effects provide instant visual feedback and enhance user interaction. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Les éléments web peuvent réagir à l’interaction de l’utilisateur. L’une des interactions les plus courantes est le survol d’un élément avec la souris.

En CSS, cela est géré à l’aide de la pseudo-classe `:hover`.

## Qu’est-ce que `:hover` ?

La pseudo-classe `:hover` applique des styles lorsque l’utilisateur place le pointeur de la souris sur un élément.

Syntaxe de base :
```css
selector:hover {
  property: value;
}
```
Exemple :

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5LWJ1dHRvbiI+Q2xpY2sgTWU8L2J1dHRvbj4KICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJzdHlsZWQtbGluayI+TGVhcm4gTW9yZTwvYT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

Lorsque l'utilisateur survole le bouton, la couleur d'arrière-plan change. Lorsque le curseur est sur le lien, le lien devient souligné.

`:hover` fonctionne sur la plupart des éléments HTML. Il ne s'active que lorsque le pointeur est au-dessus de l'élément.

Remarque

## Importance des effets de survol

Les effets de survol améliorent l'expérience utilisateur, fournissent un retour visuel et rendent les interfaces plus interactives.

Ils sont couramment utilisés pour les liens (`<a>`) et les boutons, ainsi que pour les menus de navigation.

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Ajout d'Effets au Survol

Qu’est-ce que :hover ?

Importance des effets de survol

Qu’est-ce que `:hover` ?