tablerows hover with table even/odd styled via CSS

Question

even/odd styles set on tablerows but hovering of table rows don't work .
Try it on : http://jsfiddle.net/w7brN/

CSS style :

#table_even tr:hover { background-color:#fffbae!important; } /* hovering */

#table_even tr:nth-child(odd) td { background-color:#fbfbfb } /*odd*/
#table_even tr:nth-child(even) td { background-color:#e8ecee } /* even*/

HTML Codes:

<table id="table_even" style="width: 100%">
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
</table>

how can be solve ?

Answer 1

You need to re-order the CSS and add the <td> like so this:

   #table_even tr:nth-child(odd) td {
    background-color: #fbfbfb
} /*odd*/
#table_even tr:nth-child(even) td {
    background-color: #e8ecee
} /* even*/
#table_even tr:hover td {
    background-color: #fffbae;
} /* hovering */

Otherwise the nth-child rules will always have precedence over the hover, aswell as you added the background-color to the <tr>, not the <td>s before.