How can I make hover stage for odd and even table row

I want make hover stage for my table row. If Hover my mouse on row than background color should be change.

My CSS is this:

.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开发者_JS百科 1px #ccc;}

I find that this works:

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

Your problem is probably that the specificity of your even/odd selectors is the same as the :hover selector. If you put the hover above the normal style it will get overwritten. Try doing this:

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

Like here: http://jsfiddle.net/dwkEk/

<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>
...

Hover

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

You can also try...

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

Perhaps this link would help you,

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

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

But I have never used it, and i usually do using javascript, easily done with jquery,

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

On jsfiddle.

Without javascript here. But it might not work with older versions of browsers.

tr:hover { background: #aaa; }