Um einen Hover-Effekt in CSS zu erstellen, wird die Pseudoklasse `:hover` verwendet. Hier ist ein einfaches Beispiel für einen Hover-Effekt, der den Hintergrundfarbe eines Links ändert, wenn der Benutzer mit der Maus darüber fährt:
```css
a {
color: black;
background-color: white;
}
a:hover {
background-color: blue;
}
```
In diesem Beispiel ändert sich die Hintergrundfarbe des Links zu Blau, wenn man mit der Maus darüber fährt. Du kannst ähnlich jede CSS-Eigenschaft ändern, wenn der Hover-Effekt ausgelöst wird.
Für komplexere Hover-Effekte wie Übergänge kannst du CSS3-Transitions hinzufügen, um den Hover-Effekt glatter zu gestalten. Zum Beispiel:
```css
a {
color: black;
background-color: white;
transition: background-color 0.5s ease;
}
a:hover {
background-color: blue;
}
```
Jetzt ändert sich die Hintergrundfarbe des Links über einen Zeitraum von einer halben Sekunde von Weiß zu Blau.
Das sind die Grundlagen, um einen Hover-Effekt in CSS zu erstellen. Es gibt jedoch viele weitere Möglichkeiten, wie Schatten hinzufügen, Schriftgrößen ändern, Ränder und vieles mehr zu animieren.
