Оглавление

Создание ссылки, меняющей цвет при наведении на нее указателя мыши

Можно создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши. Его можно с успехом использовать в созданных на основе CSS панелях навигации; он применим и по отношению к ссылкам в тексте.

 

Решение
Для создания описанного эффекта необходимо воспользоваться динамическими псевдоклассами якоря :hover и :active.

 

Рассмотрим следующий пример. Ниже представлено типичное правило стиля, в котором описания всех псевдоклассов якоря одинаковы:

a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}

Если мы применим данное правило, ссылки будут отображаться синим цветом (#6A5ACD) с подчеркиванием, как на рис. 2.7.

 

Использование одинакового описания для всех псевдоклассов ссылок

Рис.2.7. Использование одинакового описания для всех псевдоклассов ссылок

 

Для выполнения поставленной задачи нам нужно удалить селекторы псевдоклассов :hover и :active из общего описания и задать каждому из них свое собственное описание. В приведенном ниже CSS-коде к нижнему подчеркиванию добавлено еще и верхнее. Кроме того, в нем задан фоновый цвет и более темный цвет для текста ссылки. На рис. 2.8. показан результат обработки данного кода браузером:

a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}


Как вы уже наверняка догадались, остальным псевдоклассам также можно задавать отдельные описания. В частности, вы можете захотеть использовать специальное оформление для посещенных ссылок. Для этого нужно составить отдельное описание для псевдокласса :visited.

 

 

Наведение указателя мыши на ссылку,

 Рис. 2.8. Наведение указателя мыши на ссылку, для которой указан специальный стиль при данном событии

 
При определении стиля для псевдоклассов избегайте изменения размера или начертания шрифта. В противном случае пользователь будет наблюдать постоянное дрожание страницы, ведь окружающий контент будет отодвигаться, чтобы освободить место для отображения более крупного текста при наведении на него указателя мыши.

Совет
Порядок следования описаний псевдоклассов. Псевдоклассы якоря должны следовать в порядке :link, :visited, :hover, :active. В противном случае результат обработки кода может отличаться от ожидаемого. Для запоминания часто используется слово LoVeHAte
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити