Stany linków w CSS

Myślę, że odwiedzając różne strony internetowe, zwróciłeś uwagę na to, że linki zazwyczaj reagują na najechanie myszką na nie. Taki efekt można osiągnąć, ustawiając zachowanie linków w różnych stanach.

Na przykład tak - a:hover - przechwytujemy stan, gdy na link najechano kursorem myszy. W tym momencie możemy, na przykład, zmienić kolor linku lub usunąć/dodać podkreślenie. Konstrukcja :hover nazywa się pseudoklasą. Pseudoklasy pozwalają przechwytywać różne stany elementów.

Oprócz :hover są jeszcze pseudoklasy :link, które przechwytują nieodwiedzony link, i :visited, które przechwytują odwiedzony link. Na niektórych stronach za ich pomocą pokazuje się użytkownikom, gdzie byli, a gdzie - nie. Jest jeszcze pseudoklasa :active, która przechwytuje następujący stan: na element kliknięto myszką, ale jeszcze jej nie puszczono.

W następnym przykładzie dla linku w stanie :hover usuwane jest podkreślenie, w stanie :link ustawiany jest czerwony kolor, w stanie :visited - zielony, w :active - niebieski. W rezultacie okaże się, że na początku link będzie czerwony, po kliknięciu na niego - zielony, jeśli kliknąć na niego myszką i nie puszczać - niebieski, a jeśli najechać myszką - stanie się niespodkreślony:

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

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

Результат: