Stanja linkova u CSS

Mislim da ste, posećujući različite sajtove na internetu, primetili da linkovi obično reaguju kada se mišem pređe preko njih. Takav efekat se može postići zadavanjem ponašanja linkova u različitim stanjima.

Na primer, ovako - a:hover - ćemo uhvatiti stanje kada je miš prešao preko linka. U tom momentu možemo, na primer, promeniti boju linka ili ukloniti/dodati mu podvlačenje. Konstrukcija :hover se zove pseudoklasa. Pseudoklase omogućavaju hvatanje različitih stanja elemenata.

Pored :hover postoje i pseudoklase :link, koje hvataju neposećeni link, i :visited, koje hvataju posećeni link. Na nekim sajtovima se uz njihovu pomoć pokazuje korisnicima gde su bili, a gde - nisu. Postoji i pseudoklasa :active, koja hvata sledeće stanje: na element je kliknuto mišem, ali još nije otpušteno.

U sledećem primeru za link u stanju :hover se uklanja podvlačenje, u stanju :link se postavlja crvena boja, u stanju :visited - zelena, u :active - plava. Kao rezultat će ispasti da će na početku link biti crvene boje, nakon klika na njega - zelene, ako se klikne na njega mišem i ne otpusti - plave, a ako se mišem pređe preko njega - postaće nepodvučen:

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

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

Результат: