Effets de survol

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 8 sur 43.

La pseudo-classe :hover vous permet de modifier le style d'un élément lorsque l'utilisateur le survole avec sa souris.

Voici un exemple simple qui change la couleur du texte lorsque vous survolez un bouton :

button {
  color: black;
}

button:hover {
  color: red;
}

Dans cet exemple, le texte du bouton est noir par défaut, mais lorsque vous le survolez, le texte devient rouge.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Vous avez un bouton qui doit changer de style lorsqu'il est survolé. Votre tâche consiste à :

Utiliser la pseudo-classe :hover pour changer la couleur d'arrière-plan du bouton en green lorsque l'utilisateur le survole.
Appliquer une ombre portée au bouton pendant l'effet de survol pour donner l'impression qu'il est soulevé. Utilisez box-shadow comme ceci :

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Cela ajoute une ombre avec un décalage, un flou et une couleur.

Aide-mémoire

La pseudo-classe :hover modifie le style d'un élément lorsque l'utilisateur le survole avec sa souris :

button {
  color: black;
}

button:hover {
  color: red;
}

Dans cet exemple, le texte du bouton est noir par défaut, mais lorsque vous le survolez, le texte devient rouge.

Essayez vous-même

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.