Как я могу сделать зависание для нечетной и четной строки таблицы

Question

Я хочу сделать зависание для моей строки в таблице. Если навести указатель мыши на строку, измените цвет фона.

Мой CSS это:

.tabuler_data {border-collapse:collapse;}
.tabuler_data td {border:solid 1px #ccc;}
.tabuler_data tr:nth-child(even) td, tbody tr.even td {background:#fff;}
.tabuler_data tr:nth-child(odd) td, tbody tr.odd td {background:#f5f5f5;}
.tabuler_data thead {background:#666;font:bold 12px Arial, Helvetica, sans-serif;color:#fff;text-align:center;}
.tabuler_data th{border:solid 1px #ccc;}

Answer 1

Я считаю, что это работает:

#order-table tr:hover:nth-child(odd)
{
    background: blue;
}

Answer 2

Ваша проблема, вероятно, в том, что специфичность ваших четных / нечетных селекторов такая же, как: hover selector. Если вы поместите курсор над обычным стилем, он будет перезаписан. Попробуйте сделать это:

.tabuler_data tr:nth-child(odd):hover td, tbody tr.odd:hover td {background:#f00;}

Как здесь: http://jsfiddle.net/dwkEk/

Answer 3

<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
...

Наведение

.tabuler_data tr:hover{background:#600000;}

Вы также можете попробовать ...

.tabuler_data tr:hover td{background:#600000;}

Answer 4

Возможно, эта ссылка поможет вам,

http://juicystudio.com/cognitive/example16.htm

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20011105/html/interactive/flat/css3-modsel-18.html

Но я никогда не использовал его, и я обычно использую javascript, легко с помощью jquery,

 $('table tr').hover(function (){
     $(this).css('background', 'red')}, 
                     function (){ 
      $(this).removeAttr('style');})

Вкл. jsfiddle .

Без JavaScript здесь . Но он может не работать со старыми версиями браузеров.

Answer 5

tr:hover { background: #aaa; }