Tilstander for lenker i CSS

Jeg tror at du, når du besøker forskjellige nettsteder på internett, har lagt merke til at lenker vanligvis reagerer på at musepekeren føres over dem. Slik effekt kan oppnås ved å definere oppførselen til lenker i forskjellige tilstander.

For eksempel, slik - a:hover - fanger vi tilstanden når musepekeren føres over lenken. I dette øyeblikket kan vi for eksempel endre fargen på lenken eller fjerne/legge til understreking. Konstruksjonen :hover kalles et pseudoklasse. Pseudoklasser gjør det mulig å fange opp forskjellige tilstander av elementer.

I tillegg til :hover finnes det andre pseudoklasser som :link, som fanger opp en ubesøkt lenke, og :visited, som fanger opp en besøkt lenke. På noen nettsteder brukes disse for å vise brukerne hvor de har vært, og hvor de ikke har vært. Det finnes også en pseudoklasse :active, som fanger opp følgende tilstand: det er klikket på elementet med musepekeren, men den er ikke sluppet ennå.

I det følgende eksempelet for en lenke i tilstanden :hover fjernes understrekingen, i tilstanden :link settes en rød farge, i tilstanden :visited - grønn, i :active - blå. Resultatet blir at først vil lenken være rød, etter at det er klikket på den - grønn, hvis det klikkes på den med musepekeren og ikke slippes - blå, og hvis musepekeren føres over den - vil den bli uten understreking:

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

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