Състояния на връзките в CSS

Мисля, че вие, посещавайки различни сайтове в интернет, сте обърнали внимание на това, че връзките обикновено реагират на посочване с мишката върху тях. Такъв ефект може да се постигне, като се зададе поведение на връзките в различни състояния.

Например, ето така - a:hover - ние улавяме състоянието, когато върху връзката е посочен курсора на мишката. В този момент можем, например, да променим цвета на връзката или да премахнем/добавим подчертаване към нея. Конструкцията :hover се нарича псевдоклас. Псевдокласовете позволяват да се улавят различни състояния на елементите.

Освен :hover има още псевдокласове :link, които улавят непосетената връзка, и :visited, които улавят посетената връзка. На някои сайтове с тяхна помощ се показва на потребителите, къде са били, а къде - не. Има още и псевдоклас :active, който улавя следното състояние: върху елемента е натиснато с мишката, но все още не е отпуснато.

В следващия пример за връзка в състояние :hover се премахва подчертаването, в състояние :link се задава червен цвят, в състояние :visited - зелен, в :active - син. В резултат ще се получи, че в началото връзката ще бъде с червен цвят, след натискане върху нея - със зелен, ако се натисне върху нея с мишката и не се отпусне - със син, а ако се посочи с мишката - ще стане неподчертана:

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

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

Результат: