Stavy odkazů v CSS

Myslím, že jste si při návštěvě různých webů všimli, že odkazy obvykle reagují na najetí myší na ně. Tohoto efektu lze dosáhnout nastavením chování odkazů v různých stavech.

Například takto - a:hover - zachytíme stav, kdy je na odkaz najetý kurzor myši. V tomto okamžiku můžeme například změnit barvu odkazu nebo odstranit/přidat mu podtržení. Konstrukce :hover se nazývá pseudotřída. Pseudotřídy umožňují zachytávat různé stavy prvků.

Kromě :hover existují další pseudotřídy :link, které zachytávají nenavštívený odkaz, a :visited, které zachytávají navštívený odkaz. Na některých webech s jejich pomocí ukazují uživatelům, kde byli a kde ne. Existuje také pseudotřída :active, která zachytává následující stav: na prvek se kliklo myší, ale ještě se nepusťilo.

V následujícím příkladu pro odkaz ve stavu :hover se odstraní podtržení, ve stavu :link se nastaví červená barva, ve stavu :visited - zelená, v :active - modrá. Ve výsledku to bude znamenat, že zpočátku bude odkaz červené barvy, po kliknutí na něj - zelené, pokud na něj kliknete myší a nepusťte - modré, a pokud na něj najedete myší - stane se nepodtrženým:

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

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

Результат: