Stări ale linkurilor în CSS

Cred că tu, vizitând diverse site-uri pe internet, ai observat că linkurile de obicei reacționează la trecerea mouse-ului peste ele. Un astfel de efect poate fi obținut, definind comportamentul linkurilor în diverse stări.

De exemplu, așa - a:hover - vom prinde starea când mouse-ul este plasat peste link. În acest moment putem, de exemplu, schimba culoarea linkului sau să îndepărtăm/adaugăm sublinierea. Construcția :hover se numește pseudoclasă. Pseudoclasele permit prinderea diferitelor stări ale elementelor.

În afară de :hover mai există pseudoclasele :link, care prind un link nevizitat, și :visited, care prind un link vizitat. Pe unele site-uri cu ajutorul lor le sunt arătat utilizatorilor unde au fost, și unde - nu. Există și pseudoclasa :active, care prinde următoarea stare: s-a făcut click pe element cu mouse-ul, dar încă nu a fost eliberat.

În următorul exemplu pentru linkul în starea :hover se îndepărtează sublinierea, în starea :link se definește culoarea roșie, în starea :visited - verde, în :active - albastru deschis. Ca rezultat va ieși, că la început linkul va fi de culoare roșie, după click pe el - verde, dacă se apasă pe el cu mouse-ul și nu se eliberează - albastru deschis, iar dacă se trece mouse-ul peste el - va deveni nesubliniat:

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

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

Результат: