CSS псевдокласс :hover

Псевдокласс :hover применяет стиль к элементу, когда пользователь наводит на него курсор мыши:

/* Выбор ссылки, над которой находится указатель мыши */
a:hover { background: silver; }

Примечание: стили псевдокласса :hover могут быть переопределены псевдоклассом :link или :visited, если они расположены в CSS-коде после псевдокласса :hover. Поэтому псевдокласс :hover необходимо размещать в соответствии с порядком LVHA::

:link {...}
:visited {...}
:hover {...}
:active {...}

То есть псевдокласс :hover должен быть размещён после псевдоклассов :link и :visited, но перед псевдоклассом :active.

Пример

table { 
  width: 70%; 
  border-collapse: collapse;
}

td, th { 
  padding: 3px 7px; 
  border: 1px solid #C2C2FF;
}

th { 
  background-color: #9999FF; 
  color: #fff; 
}

tr:hover { background: #e6e6ff; }

<table>
  <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
  <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
  <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
  <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
  <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
  <tr><td>Мэгги</td><td>Симпсон</td><td>дочь</td></tr>
</table>

Результат

Имя	Фамилия	Положение
Гомер	Симпсон	отец
Мардж	Симпсон	мать
Барт	Симпсон	сын
Лиза	Симпсон	дочь
Мэгги	Симпсон	дочь