Смена стилей при наведении на таблицу

[Avel_Mink]

Проблема в том как сделать, чтобы при наведении курсора на таблицу менялись стили у тегов <td>, находящихся в данной таблице. Простыми средствами я так понял это не решить, может кто поможет.

вот изначальная таблица:

<table>
	<tr>
		<td class="a1">
		</td>
		<td class="a2">
		</td>
		<td class="a3">
		</td>
	</tr>
	<tr>
		<td class="a4">
		</td>
		<td class="a_c"> 
					CONTENT
		</td>
		<td class="a5">
		</td>
	</tr>
	<tr>
		<td class="a6">
		</td>
		<td class="a7">
		</td>
		<td class="a8">
		</td>
	</tr>
</table>

и надо сделать чтобы при наведении на эту таблицу менялись стили у всех тэгов <td>, то есть стало вот так:

<table>
	<tr>
		<td class="a1_h">
		</td>
		<td class="a2_h">
		</td>
		<td class="a3_h">
		</td>
	</tr>
	<tr>
		<td class="a4_h">
		</td>
		<td class="a_c">
			CONTENT
		</td>
		<td class="a5_h">
		</td>
	</tr>
	<tr>
		<td class="a6_h">
		</td>
		<td class="a7_h">
		</td>
		<td class="a8_h">
		</td>
	</tr>
</table>

вот код CSS, если надо:

td.a1 {
	width:10px;
	height:10px;
	background-image:url('/img/a/1.png')
}

td.a2 {
	height:10px;
	background-image:url('/img/a/2.png')
}

td.a3 {
	width:10px;
	height:10px;
	background-image:url('/img/a/3.png')
}

td.a4 {
	width:10px;
	background-image:url('/img/a/4.png')
}

td.a_c {
	background-color:#FFFFFF;
	vertical-align:top;
	padding:5px;
}

td.a5 {
	width:10px;
	background-image:url('/img/a/5.png')
}

td.a6 {
	width:10px;
	height:10px;
	background-image:url('/img/a/6.png')
}

td.a7 {
	height:10px;
	background-image:url('/img/a/7.png')
}

td.a8 {
	width:10px;
	height:10px;
	background-image:url('/img/a/8.png')
}
td.a1_h {
	width:10px;
	height:10px;
	background-image:url('/img/a/h1.png')
}

td.a2_h {
	height:10px;
	background-image:url('/img/a/h2.png')
}

td.a3_h {
	width:10px;
	height:10px;
	background-image:url('/img/a/h3.png')
}

td.a4_h {
	width:10px;
	background-image:url('/img/a/h4.png')
}

td.a_c {
	background-color:#FFFFFF;
	vertical-align:top;
	padding:5px;
}

td.a5_h {
	width:10px;
	background-image:url('/img/a/h5.png')
}

td.a6_h {
	width:10px;
	height:10px;
	background-image:url('/img/a/h6.png')
}

td.a7_h {
	height:10px;
	background-image:url('/img/a/h7.png')
}

td.a8_h {
	width:10px;
	height:10px;
	background-image:url('/img/a/h8.png')
}

PS^ Данная конструкция делает вокруг таблицы рамку из картинок если че. Заранее спасибо за помощь

Edited July 7, 2010 by Avel_Mink

[npofopr]

для td точно полно информации http://tinyurl.com/32txjta

[psywalker]

JS тебе в помощь

[Avel_Mink]

для td точно полно информации http://tinyurl.com/32txjta

понимаешь ли если бы я искал и не нашел, я бы сюда не обратился. Просто изменить стили при наведении на <td> это любой может сделать с помощью CSS. У меня же задача (если ты не внимательно прочитал) состоит в том, чтобы изменить стили одновременно у восьми тэгов <td> при наведении на ТАБЛИЦУ (это важно), а не на отдельную ячейку. Думаю тут без помощи js не обойтись, а в нем я не силен, поэтому и прошу помощи.

[sigma77]

Avel_Mink,

Можно в принципе и на CSS

table:hover .a1 {прописываем новые стили при наведении}
table:hover .a2 {прописываем новые стили при наведении}
...
table:hover .a8 {прописываем новые стили при наведении}

Думаю мысль понятна. В ИЕ6 работать не будет.

Edited July 8, 2010 by sigma77