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

🕛 22.01.2009, 23:47

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

Поскольку правило будет распространяться на все строки таблицы, что не всегда желательно, то в таблицу можно добавить тег <TBODY>, внутри которого цвет строк будет меняться (пример 1).

Пример 1. Использование псевдокласса hover

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Таблица</title> <style type="text/css"> TABLE { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid #000; /* Параметры рамки */ } TH { background: #afd792; /* Цвет фона */ } TBODY TR:hover { background: #b8e699 url(images/bggrad.png) repeat-y; /* Параметры фона */ } TBODY TR:hover TD { color: #fff; /* Цвет текста */ } </style> </head> <body> <table> <tr> <th>&nbsp;</th> <th>2004</th> <th>2005</th> <th>2006</th> </tr> <tbody> <tr> <td>Рубины</td> <td>43</td> <td>51</td> <td>79</td> </tr> <tr> <td>Изумруды</td> <td>28</td> <td>34</td> <td>48</td> </tr> <tr> <td>Сапфиры</td> <td>29</td> <td>57</td> <td>36</td> </tr> </tbody> </table> </body>
</html>