Оглавление

Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS

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

 

Решение
Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.

 

Вернемся к рассмотренному ранее примеру навигационного меню и добавим в таблицу стилей следующее правило:
chapter04/listnav2.css (фрагмент)
#navigation li a:hover {
background-color: #711515;

color: #FFFFFF;
}
На рис. 4.4 показан вид меню при наведении курсора на первый пункт:

 

Эффект смены визуального оформления пунктов меню

Рис. 4.4. Эффект смены визуального оформления пунктов меню, реализованный средствами CSS (DEMO)

 

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

 

Примечание
Мышка тут, мышка там... При условии просмотра сайта в современных браузерах, включая Internet Explorer 7, селектор псевдокласса :hover можно использовать по отношению к любому элементу, однако версии Internet Explorer 6 и ниже корректно обрабатывают его только для ссылок.

 

В ранних версиях Internet Explorer для перехода по ссылке необходимо было щелкнуть по ее тексту, поскольку ссылка не заполняла весь контейнер (в данном случае – элемент li) целиком. Это означает, что для перехода к определенному разделу пользователь должен щелкнуть по тексту: щелчок по красному фоновому цвету не сработает.

 

Данную проблему можно решить путем увеличения ширины ссылки средствами CSS (однако такой способ приемлем только для Internet Explorer 6 и ниже).

 

Здесь представлено необходимое для этого правило стиля:

* html #navigation li a {
width: 100%;
}


Безусловно, в некоторых случаях вполне можно обойтись без таких трюков и оставить все как есть. Мы рассмотрим проблему создания кросс-браузерного кода более подробно в главе 7.

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити