Состояния ссылок в 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>

Результат выполнения кода:

Решетка # в адресе ссылки представляет собой специальный заполнитель, который используют, когда не важно, куда ведет ссылка. При переходе по такой ссылке вы будете попадать на текущую страницу. Можно указывать не одну решетку, а несколько.