Tilstande for links i CSS

Jeg tror, at du, når du besøger forskellige websteder på internettet, har lagt mærke til, at links normalt reagerer på, når du fører musen over dem. Denne effekt kan opnås ved at tildele adfærd til links i forskellige tilstande.

For eksempel, sådan her - a:hover - fanger vi tilstanden, når musen holdes over linket. I dette øjeblik kan vi for eksempel skifte linkets farve eller fjerne/tilføje understregning. Konstruktionen :hover kaldes et pseudoklasse. Pseudoklasser lader dig fange forskellige tilstande af elementer.

Udover :hover er der andre pseudoklasser :link, som fanger et ikke-besøgt link, og :visited, som fanger et besøgt link. På nogle websteder bruges de til at vise brugerne, hvor de har været, og hvor de ikke har været. Der er også pseudoklassen :active, som fanger følgende tilstand: der er klikket på elementet med musen, men den er ikke blevet sluppet endnu.

I det følgende eksempel fjernes understregningen for linket i tilstanden :hover, i tilstanden :link tildeles en rød farve, i tilstanden :visited - grøn, i :active - blå. Resultatet bliver, at i starten vil linket være rødt, efter der er klikket på det - grønt, hvis der klikkes på det med musen og ikke slippes - blåt, og hvis musen føres over det - vil det blive ikke-understreget:

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

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

Результат: