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

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

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

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

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

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

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