Link-Zustände in CSS

Ich denke, dass Sie beim Besuch verschiedener Websites im Internet darauf geachtet haben, dass Links normalerweise reagieren, wenn man mit der Maus über sie fährt. Einen solchen Effekt kann man erreichen, indem man das Verhalten von Links in verschiedenen Zuständen festlegt.

Zum Beispiel so - a:hover - fangen wir den Zustand ab, wenn der Mauszeiger über den Link bewegt wurde. In diesem Moment können wir zum Beispiel die Farbe des Links ändern oder die Unterstreichung entfernen/hinzufügen. Die Konstruktion :hover nennt man Pseudoklasse. Pseudoklassen ermöglichen es, verschiedene Zustände von Elementen abzufangen.

Neben :hover gibt es noch die Pseudoklassen :link, die einen nicht besuchten Link abfangen, und :visited, die einen besuchten Link abfangen. Auf einigen Websites wird damit den Nutzern gezeigt, wo sie schon waren und wo nicht. Es gibt auch die Pseudoklasse :active, die den folgenden Zustand abfängt: auf das Element wurde mit der Maus geklickt, aber noch nicht losgelassen.

Im folgenden Beispiel wird für den Link im Zustand :hover die Unterstreichung entfernt, im Zustand :link eine rote Farbe festgelegt, im Zustand :visited - grün, im Zustand :active - blau. Das Ergebnis wird sein, dass der Link anfangs rot ist, nach dem Anklicken - grün, wenn man darauf mit der Maus klickt und nicht loslässt - blau, und wenn man mit der Maus darüber fährt - wird er nicht unterstrichen:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>