Estados dos links em CSS

Acho que você, ao visitar vários sites na internet, já notou que os links geralmente reagem quando você passa o mouse sobre eles. Esse efeito pode ser alcançado definindo o comportamento dos links em vários estados.

Por exemplo, assim - a:hover - nós capturamos o estado quando o cursor do mouse passa sobre o link. Nesse momento, podemos, por exemplo, mudar a cor do link ou remover/adicionar o sublinhado. A construção :hover é chamada de pseudo-classe. Pseudo-classes permitem capturar diferentes estados dos elementos.

Além do :hover, existem outras pseudo-classes :link, que capturam um link não visitado, e :visited, que capturam um link visitado. Em alguns sites, com a ajuda delas, mostram aos usuários onde eles estiveram e onde não estiveram. Há também a pseudo-classe :active, que captura o seguinte estado: o botão do mouse foi clicado no elemento, mas ainda não foi solto.

No próximo exemplo, para o link no estado :hover, o sublinhado é removido, no estado :link é definida a cor vermelha, no estado :visited - verde, no :active - azul. Como resultado, inicialmente o link será vermelho, depois de clicado - verde, se clicado e mantido pressionado - azul, e se o mouse passar sobre ele - ficará sem sublinhado:

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

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

Результат: