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

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

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

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

CSS

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

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

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