Benötigtes Vorwissen
Schüler-Autoren dieses Artikels sind Dirk Müller und David Lipert
hover, focus, after und co.
hover, focus, after und co zählen zu den so genannten Pseudo Klassen.
Diese beschreiben immer ein Element in einem gewissen Zustand:
z.B. einen bereits besuchten Link oder einen gedrückten Knopf.
hover
Die Pseudo-Klasse hover spricht ein Element an, über dem sich der Mauszeiger befindet. Wie z.B. bei diesem div-Container, bei dem die Hintergrundfarbe, beim überfahren geändert wird.
Code:
HTML:
CSS:
focus
Die Pseudo-Klasse focus spricht ein Element an, dass gerade angeklickt wird. Wie z.B. bei diesem Submit-Button, bei dem die Hintergrundfarbe, beim anklicken geändert wird.
Code:
HTML:
CSS:
Weitere Beispiele sind unter
https://www.w3schools.com/css/css_pseudo_classes.asp
zu finden.