Не забывайте, что в вашем CSS вы можете комбинировать псевдо-селекторы:
a:link {
color: blue;
}
a:hover {
color: green;
}
a:visited {
color: purple;
}
a:active {
/* link is active */
color: red;
}
a:visited:hover {
/* hovering on a visited link */
color: pink;
}
a:active:hover {
/* hovering on an active link */
color: black;
}
a:visited:active:hover {
color: fuchsia;
}
Существует определенная разница между a:active
и a:active:hover
: ссылка может стать активной, если к ней подключиться с помощью клавиатуры. Хотя это не на 100% надежно, состояние активности и зависания предполагает, что у пользователя нажата ссылка. Изменение стиля границы даст вам желаемый эффект. Единственная ошибка в этом случае, если ссылка становится активной, а затем пользователь наводит курсор на нее, не щелкая, она все равно будет нажата.
Попробуйте этот CSS, чтобы понять, что я имею в виду:
a {
padding: 5px 10px;
background-color: gray;
border-color: gray;
border-style: outset;
}
a:active:hover {
border-style: inset;
}