Псевдоклассы ссылок на якорь

Наиболее часто псевдоклассы используются с гиперссылками (тегами) для таких эффектов, как изменение цвета или исчезновение подчеркивания при наведении на них указателя.

Для ссылок на якорь имеется четыре псевдокласса, так как ссылки всегда находятся в одном из четырех состояний:

• Link - просто ссылка, сидит и ждет пока ее кто-нибудь щелкнет;
• Visited - пользователь уже щелкнул эту ссылку, просмотренная ссылка;
• Hover - указатель мыши в данный момент наведен на ссылку;
• Active - ссылка в момент щелчка.

А вот пример соответствующих селекторов псевдоклассов для этих состояний:

• a:rink {color:black;}
• a:visited {color:gray;}
• a:hover {text-decoration:none;}
• a:active {color:navy}

Итак, не будем вдаваться в споры о самых подходящих цветах ссылок, а лучше посмотрим на данные правила. Согласно им, изначально ссылка отображаемся черным шрифтом (и по умолчанию имеет подчеркивание). Когда пользователь наводит на нее указатель мыши (состояние hover), подчеркивание удаляется, шрифт текста ссылки остается черным. Когда пользователь щелкает ссылку (состояние active), она меняет цвет на синий и после этого отображается серым до тех пор, пока из браузера не будет удален или обновлен журнал просмотренных ссылок. С помощью таких псевдоклассов мы имеем полный контроль над внешним видом ссылок.

Но самое интересное начинается, когда вы используете псевдоклассы ссылок на якорь как часть контекстных селекторов. Например, для создания различных эффектов и облика разных групп ссылок - панели навигации, нижнего колонтитула, боковых панелей и ссылок в тексте и т.п. Мы подробнее рассмотрим применение псевдоклассов для добавления стилей ссылкам чуть ниже, а пока отметим следующие моменты:

• все четыре состояния задавать необязательно - если вы хотите указать особенности только состояния link и hover, в этом нет ничего противоправного; во многих случаях нет смысла в отображении ссылок как просмотренных;

• браузер может пропустить некоторые из этих правил, если вы укажете их в порядке, отличном от нашего: link, visited, hover, active;

• для создания всевозможных эффектов при наведении указателя с этими псевдоклассами можно использовать любой селектор (не только а);

например:

p:hover {background-color: gray}

Благодаря последнему правилу при наведении указателя мыши на абзац его фоновый цвет изменится на серый.

Не забывайте, что старые браузеры не поддерживают эффекты наведения указателя на любые объекты кроме ссылки на якорь.