Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на JavaScript
При наведении указателя мыши на кнопку навигационного меню ее вид может изменяться, привлекая к себе внимание. Для реализации такого эффекта в навигации, основанной на применении графики, не- обходимо использовать два изображения и JavaScript.
Решение
Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.
Вернемся к рассмотренному ранее примеру навигационного меню и до- бавим в таблицу стилей следующее правило:
chapter04/listnav2.css (фрагмент)
#navigation li a:hover {
background-color: #711515;
Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS 97
color: #FFFFFF;
}
На рис. 4.4 показан вид меню при наведении курсора на первый пункт:
Примечание
Мышка тут, мышка там… При условии просмотра сайта в современных бро- узерах, включая Internet Explorer 7, селектор псевдокласса :hover можно ис- пользовать по отношению к любому элементу, однако версии Internet Explorer
6 и ниже корректно обрабатывают его только для ссылок.
В ранних версиях Internet Explorer для перехода по ссылке необходимо было щелкнуть по ее тексту, поскольку ссылка не заполняла весь контейнер (в дан- ном случае – элемент li) целиком. Это означает, что для перехода к опреде- ленному разделу пользователь должен щелкнуть по тексту: щелчок по крас- ному фоновому цвету не сработает.
Данную проблему можно решить путем увеличения ширины ссылки средства- ми CSS (однако такой способ приемлем только для Internet Explorer 6 и ниже). Здесь представлено необходимое для этого правило стиля:
* html #navigation li a {
width: 100%;
}
Безусловно, в некоторых случаях вполне можно обойтись без таких трюков и оставить все как есть. Мы рассмотрим проблему создания кросс-броузерного кода более подробно в главе 7.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- 50 СПОСОБОВ ЗАСТАВИТЬ GOOGLE ЛЮБИТЬ ВАШ САЙТ (0)
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)