Состояния ссылок в CSS
Я думаю, что вы, посещая различные сайты в интернете, обращали внимание на то, что ссылки обычно реагируют на наведение мышкой на них. Такого эффекта можно добиться, задавая поведение ссылок в различных состояниях.
К примеру, вот так - a:hover - мы
поймаем состояние, когда на ссылку навели
курсор мышки. В этот момент мы можем, к примеру,
поменять цвет ссылки или убрать/добавить
ей подчеркивание. Конструкция :hover
называется псевдоклассом. Псевдоклассы
позволяют отлавливать разные состояния элементов.
Кроме :hover есть еще псевдоклассы
:link, которые отлавливают не посещенную
ссылку, и :visited, которые отлавливают
посещенную ссылку. На некоторых сайтах с
их помощью показывают пользователям, где
они были, а где - нет. Есть еще и псевдокласс
:active, который отлавливает следующее
состояние: на элемент нажали мышкой, но
еще не отпустили.
В следующем примере для ссылки в состоянии
:hover убирается подчеркивание, в
состоянии :link задается красный цвет,
в состоянии :visited - зеленый, в
:active - голубой. В результате получится,
что в начале ссылка будет красного цвета,
после нажатия на нее - зеленого, если нажать
на нее мышкой и не отпускать - голубого,
а если навести мышкой - станет
неподчеркнутой:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}
<a href="#">link</a>
:
Решетка # в адресе ссылки представляет собой специальный
заполнитель, который используют, когда не важно, куда
ведет ссылка. При переходе по такой ссылке вы будете
попадать на текущую страницу. Можно указывать не одну
решетку, а несколько.