Изменение фона таблицы при наведении мыши

strmask · 23.12.2009, 22:26

Подскажите как произвести изменение фона таблицы при наведении мыши при помощи CSS.

Defite · 05.01.2010, 16:02

Прошу уточнить - изменение фона всей таблицы или только определенных ячеек/строк ?

В принципе пользуемся :hover, для смены подкрашивания строки у меня получилось так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>table hover</title>
<style type=text/css>
table {
border: 0 dashed gray;
border-spacing : 4px;
}

table td {
border: 1px dotted black;
padding: 2px;
font: 8pt Verdana, sans-serif;
background-color: #FFFFFF;
}

tr:hover td {
background-color: #9092EC;
} 
</style>
</head>
<body>
<table border=1 cellpadding=10 cellspacing=10>
<tr>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
</tr>
<tr>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
</tr>
<tr>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
	<td>bit of text and cake</td>
</tr>
</table>
</body>
</html>

если нужно менять фон всей таблицы, все проще:

Код:

table {
background-color: #ccc;
/* исходный фоновый цвет */
}
table:hover {
background-color: #9c9c9c;
/*цвет фона при наведении мыши на таблицу*/
}

gectorGR · 24.04.2010, 17:54

Также можно менять фон ячеки при написании

td:hover: background-color:red;

Qkish · 28.06.2010, 17:43

можно еще яваскриптом по событию onMouseOver, onMouseOut

wild83 · 28.07.2010, 10:36

ага, только hover в этом случае в IE работать не будет. Ищем для этого фикс csshover.htc и подключаем его в css

BODY {
behavior:url("csshover.htc");
}

Vikoli_glaz · 10.02.2011, 04:13

hover не работает только в ie6, а на него уже можно и не обращать внимания.

23.12.2009, 22:26	#1
strmask Пользователь Пол: Регистрация: 18.05.2007 Сообщений: 106 Репутация: 16	Изменение фона таблицы при наведении мыши Подскажите как произвести изменение фона таблицы при наведении мыши при помощи CSS.

24.04.2010, 17:54	#3
gectorGR Неактивный пользователь Регистрация: 24.04.2010 Сообщений: 7 Репутация: 0	Re: Изменение фона таблицы при наведении мыши Также можно менять фон ячеки при написании td:hover: background-color:red;

28.06.2010, 17:43	#4
Qkish Неактивный пользователь Регистрация: 28.06.2010 Сообщений: 1 Репутация: 0	Re: Изменение фона таблицы при наведении мыши можно еще яваскриптом по событию onMouseOver, onMouseOut

28.07.2010, 10:36	#5
wild83 Новичок Пол: Регистрация: 28.07.2010 Сообщений: 15 Репутация: 5	Re: Изменение фона таблицы при наведении мыши ага, только hover в этом случае в IE работать не будет. Ищем для этого фикс csshover.htc и подключаем его в css BODY { behavior:url("csshover.htc"); }

10.02.2011, 04:13	#6
Vikoli_glaz Неактивный пользователь Пол: Регистрация: 10.02.2011 Сообщений: 7 Репутация: 0	Re: Изменение фона таблицы при наведении мыши hover не работает только в ie6, а на него уже можно и не обращать внимания.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Отделение шерсти от фона	Spec	Школа Photoshop / Photoshop School	17	03.10.2010 14:11
почему при наведении на файл выскакивает сообщение об ошибке	Dimo_n27	Архив	4	18.12.2009 20:29
Заливка фона в Фотошопе	Игорь	Скорая помощь	4	27.04.2009 17:28
Подсказка при наведении курсора	plahmonah	Delphi	5	14.10.2007 22:47