Как выделить цветом строку таблицы при наведении?
Стиль строки таблицы при наведении на неё курсора мыши задаётся с помощью псевдокласса :hover, который добавляется к селектору tr. В правилах стиля добавляем свойство background для желаемого цвета фона и color для цвета текста, как показано в примере 1.
Пример 1. Использование псевдокласса :hover
В данном примере при наведении на строку у неё меняется цвет фона и текста. Результат примера продемонстрирован на рис. 1.
Рис. 1. Выделеная строка
Если у таблицы содержится заголовок, что встречается довольно часто, то строка с заголовком также будет выделяться при наведении, а это может быть нежелательным. Для выделения только нужных строк следует модифицировать таблицу, вставив элементы <thead> и <tbody> и к селектору добавив tbody (пример 2).
Пример 2. Использование псевдокласса :hover
Результат данного примера показан на рис. 2.
Рис. 2. Таблица с заголовком и выделенной строкой
См. также
- :focus на мобильных устройствах
- <tr>
- Виды ссылок
- Всплывающая подсказка
- Использование :hover
- Нормальное позиционирование
- Организация данных с помощью таблиц
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Сочетание с псевдоклассами
- Таблицы
- Таблицы
- Таблицы в HTML