Pseudoklassen

Du hast sicher schon bemerkt, dass sich manche Elemente verändern, wenn du den Mauszeiger darüber bewegst: Ein Button wird dunkler, ein Link ändert seine Farbe. Das geschieht mit Pseudoklassen.

Eine Pseudoklasse wählt Elemente in einem bestimmten Zustand aus. Sie beginnt mit einem Doppelpunkt und wird meist direkt hinter einen anderen Selektor geschrieben. Die Pseudoklasse :hover wählt ein Element aus, solange sich der Mauszeiger darüber befindet:

li:hover {
	color: purple;
}

Mit dieser Regel wird ein Listeneintrag lila, wenn du darauf zeigst, und bekommt seine Farbe zurück, wenn du den Zeiger wegbewegst. Du kannst :hover an jeden Selektor hängen, zum Beispiel h2:hover oder #rassen:hover.

Bedenke, dass Smartphones und Tablets keinen Mauszeiger haben, also sollte nichts Wichtiges nur beim Darüberfahren sichtbar sein.