Изменение фонового цвета строки при наведении на нее указателя мыши
Решение
Чтобы таблицу было легче воспринимать, можно изменять цвет строки при наведении на нее указателя мыши – это выделит содержимое. Та- кой эффект показан на рис. 5.10.
Рис. 5.10. Выделение строки при наведении на нее указателя мыши
Реализовать его достаточно просто, для этого достаточно добавить в та- блицу стилей следующее правило:
chapter05/alternate.css (фрагмент)
.datatable tr:hover { background-color: #DFE7F2; color: #000000;
}
Готово!
Примечание
Ненавязчивый JavaScript. Вы наверняка заметили, что код на JavaScript был добавлен не к самой таблице; весь сценарий был размещен только внутри эле- мента script. Такой прием называется ненавязчивым JavaScript; его смысл состоит в разделении документа и сценариев, подобно тому, как мы размеща- ем раздельно разметку и каскадную таблицу стилей.
Сценарий на JavaScript должен быть запущен после загрузки таблицы, по- скольку до этого отсутствует сам объект, по отношению к которому сценарий должен выполняться. В качестве варианта можно написать функцию, которая будет выполняться по окончании загрузки страницы; в этом случае код на Ja- vaScript можно хранить в отдельном файле, указав ссылку на него в коде стра- ницы. Кроме того, чтобы сценарий загружался только при открытии страницы в броузере Internet Explorer 6, можно использовать условные комментарии. Подробнее об этом мы поговорим в разделе «Определение различных стилей для Internet Explorer 6 и 7» главы 7.
Как и в предыдущем примере, в данном случае на помощь может прийти ис- пользование различных библиотек, таких как jQuery, которые как нельзя кста- ти, когда поддержка тех или иных свойств в старых броузерах отсутствует.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Поиск веб-страниц (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Вывод текста с отступом (0)
- Каким образом броузер определяет, какие стили нужно использовать (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Добавление комментария в файл с каскадной таблицей стилей (0)