Stavy odkazov v CSS

Myslím, že ste si pri návšteve rôznych stránok na internete všimli, že odkazy zvyčajne reagujú na prejdenie myšou cez ne. Tohoto efektu sa dá dosiahnuť zadaním správania odkazov v rôznych stavoch.

Napríklad takto - a:hover - zachytíme stav, keď sa na odkaz prejde kurzorom myši. V tomto momente môžeme napríklad zmeniť farbu odkazu alebo odstrániť/pridať podčiarknutie. Konštrukcia :hover sa nazýva pseudotrieda. Pseudotriedy umožňujú zachytávať rôzne stavy elementov.

Okrem :hover existujú ešte pseudotriedy :link, ktoré zachytávajú nenavštívený odkaz, a :visited, ktoré zachytávajú navštívený odkaz. Na niektorých stránkach sa ich pomocou zobrazuje používateľom, kde boli a kde - nie. Existuje ešte pseudotrieda :active, ktorá zachytáva nasledujúci stav: na element sa kliklo myšou, ale ešte sa nepustilo.

V nasledujúcom príklade pre odkaz v stave :hover sa odstráni podčiarknutie, v stave :link sa nastaví červená farba, v stave :visited - zelená, v :active - modrá. Výsledkom bude, že na začiatku bude odkaz červenej farby, po kliknutí naň - zelenej, ak sa naň klikne myšou a nepustí - modrej, a ak sa naň prejde myšou - stane sa nepodčiarknutým:

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

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

Результат: