Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как сделать, чтобы строчки в таблице изменяли свой цвет при наведении?

Дата:21.01.16 в 12:10
Раздел: 

Сегодня рассмотрим, как стильно оформить ваши таблицы на сайте, а именно мы расскажем, как заставить строчки менять свою окраску во время наведения курсора.

прием, который изменяет цвет текста в момент наведения

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

Как вы уже знаете, за стилистику при наведении отвечает псевдокласс :hover. При добавлении его к определенному селектору будет работать наше наведение. В такой ситуации необходимо привязывать псевдокласс с тегом tr, который отвечает за строчки. Напоминаю, фоновый цвет меняется через свойство background.

Смотрим пример кода

CSS

tr {
	background:#eee;
  }
  tr:hover {
	background:#929191;
  }

А вот так будет смотреться в браузере

наведение строк в таблице

Стоит отметить, что не всегда необходимо, чтобы все строчки меняли свой фон при наведении, а обращение к tr к этому и приведет. Избежать этого можно применением уникального селектора класса, который будет соответствовать определенному стилю или использовать тег tbody. Тогда только внутри этого тега будет срабатывать наведение.

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)