Изменение цвета рядков таблицы при наведении мышью

[Flashback]

Ребята, помогите пожалуйста - устал гуглить.

Есть таблица, колонки из 2-х чередующихся цветов.

Для этого установлен дефолтный цвет таблицы, а в нужных колонках явно указывается цвет.

Упрощенно, убрав всё лишнее:

<table bgcolor=#AAAAAA>

 <tr>
   <td bgcolor=#BBBBBB> Колонка 1 </td>
   <td> Колонка 2</td>
   <td bgcolor=#BBBBBB> Колонка 3</td>
   <td> Колонка 4</td>
   <td bgcolor=#BBBBBB> Колонка 5</td>
 </tr>;

</table>

То есть все колонки цвета #AAAAAA, а те в которых указано - цвета #BBBBBB (т.е. колонки 1,3,5)

Таких рядков много, они формируются php скриптом исходя из результата запроса к базе данных.

Далее нужно сделать, чтобы при наведении мышкой на рядок, цвет рядка менялся на третий - #CCCCCC.

Для этого я использовал javascript операторы onMouseOver и onMouseOut:

<tr onmouseover="style.backgroundColor='#CCCCCC'"
    onmouseout="style.backgroundColor='' > 

То есть по идее при наведении на рядок мышкой, его цвет должен становиться CCCCCC, при отводе мышки - тем который был до этого (#AAAAAA или #BBBBBB).

Но происходит не совсем так - колонки, имеющие дефолтный цвет таблицы, меняют цвет на новый и обратно.

Те же колонки, в которых цвет указан дополнительно в теге <td>, не реагируют на функцию в родительском теге <tr> и остаются своего цвета.

Подскажите пожалуйста, как заставить это работать? Может правильный способ другой?

[lexxcode]

Посмотрите, что вы написали и подумайте еще разок. Вы же меняете цвет родителю (tr), а у td цвет то указан свой, естественно все это работает именно так. Вам, если уж скриптом, нужно менять цвет всем td в строке, а не самой строке

Можно сделать вот так на css

[Flashback]

Посмотрите, что вы написали и подумайте еще разок. Вы же меняете цвет родителю (tr), а у td цвет то указан свой, естественно все это работает именно так. Вам, если уж скриптом, нужно менять цвет всем td в строке, а не самой строке

Можно сделать вот так на css

Спасибо огромное!

Честно говоря, мне подсказали уже несколько других способов, везде это выглядело как какой-то геморрой, а этот способ - самый простой, красивый и изящный!

Очень классный удобный ресурс, на котором вы дали пример, буду знать.

Ещё раз спасибо!

[Flashback]

Блин ... опять IE радует

В IE 8 ваш пример показывает все колонки одного цвета, видимо он не знает про метод nth-child(even)

Во всех остальных браузерах отлично работает.

[hypnocolor]

Flashback, чтобы работало в IE, можно воспользоваться решением с использованием <colgroup> — http://jsfiddle.net/AGCXe/

[Flashback]

hypnocolor,

супер, спасибо за помощь! Приятно узнавать такие полезные вещи.