# Состояния ссылок на 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="#">ссылка</a>`

:

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

## Нюансы

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния `:link`, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: `:link`, `:visited`, `:hover`, `:active` (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Сделайте все ссылки в состоянии `:hover` красными и неподчеркнутыми, в состоянии `:link` - голубыми, в состоянии `:visited` - зелеными, в состоянии `:active` - черными.

## Состояния link и visited

Часто состояния `:link` и `:visited` объединяют вместе через запятую:

`a:link, a:visited { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }` `<a href="#">ссылка</a>`

:

В таком случае можно их вообще и не указывать:

`a { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }` `<a href="#">ссылка</a>`

:

## Обычное использование

Как правило, указываются состояния для всех типов ссылок одновременно, а потом ниже добавляются особенности поведения ссылки при наведении мышкой, вот так:

`a { color: red; } a:hover { text-decoration: none; }` `<a href="#">ссылка</a>`

:

Сделайте все ссылки во всех состояниях голубыми и неподчеркнутыми, а в состоянии :hover - красными и подчеркнутыми.

←→
↑