Hover-Effekte

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 8 von 43.

Die Pseudoklasse :hover ermöglicht es Ihnen, den Stil eines Elements zu ändern, wenn der Benutzer mit der Maus darüber fährt.

Hier ist ein einfaches Beispiel, das die Textfarbe ändert, wenn Sie mit der Maus über eine Schaltfläche fahren:

button {
  color: black;
}

button:hover {
  color: red;
}

In diesem Beispiel ist der Schaltflächentext standardmäßig schwarz, aber wenn Sie mit der Maus darüberfahren, wird der Text rot.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Du hast eine Schaltfläche, deren Stil sich beim Darüberfahren mit der Maus ändern soll. Deine Aufgabe ist es:

Verwende die Pseudoklasse :hover, um die Hintergrundfarbe der Schaltfläche auf green zu ändern, wenn der Benutzer mit der Maus darüberfährt.
Wende während des Hover-Effekts einen Schlagschatten auf die Schaltfläche an, damit sie so aussieht, als wäre sie angehoben. Verwende box-shadow wie folgt:

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

Dies fügt einen Schatten mit Versatz, Unschärfe und Farbe hinzu.

Spickzettel

Die Pseudoklasse :hover ändert den Stil eines Elements, wenn der Benutzer mit der Maus darüber fährt:

button {
  color: black;
}

button:hover {
  color: red;
}

In diesem Beispiel ist der Button-Text standardmäßig schwarz, aber wenn man mit der Maus darüber fährt, wird der Text rot.

Probier es selbst

<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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.