Stanja povezav v CSS

Mislim, da ste ob obisku različnih spletnih strani opazili, da se povezave običajno odzivajo na premik miške nad njimi. Takega učinka lahko dosežemo z določanjem obnašanja povezav v različnih stanjih.

Na primer, takole - a:hover - bomo ujeli stanje, ko je miškin kazalec postavljen nad povezavo. V tem trenutku lahko, na primer, spremenimo barvo povezave ali odstranimo/dodamo podčrtanje. Konstrukcija :hover se imenuje psevdorazred. Psevdorazredi omogočajo lovljenje različnih stanj elementov.

Razen :hover obstajajo še psevdorazredi :link, ki ujamejo neobiskano povezavo, in :visited, ki ujamejo obiskano povezavo. Na nekaterih spletnih mestih z njovo pomočjo uporabnikom pokažejo, kje so bili, in kje - ne. Obstaja še psevdorazred :active, ki ujame naslednje stanje: na element so kliknili z miško, vendar ga še niso spustili.

V naslednjem primeru se za povezavo v stanju :hover odstrani podčrtanje, v stanju :link določi rdeča barva, v stanju :visited - zelena, v :active - modra. Kot rezultat bo povezava na začetku rdeče barve, po kliku nanjo - zelene, če kliknemo nanjo z miško in ne spustimo - modre, če pa z miško povozimo čeznjo - postane nepodčrtana:

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

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

Результат: