Odd table rows not highlighting

Question

I have a table that highlights all the odd rows.

To do this, I just check what the row number is and apply the alt class to said row.

I then highlight the row on hover using a simple :hover in the CSS file.

It highlights the non- .alt rows perfectly, but not the alt rows.

Here is my CSS code:

.datagrid tr:hover, .datagrid tr.alt:hover {
    background-color:#497A43;
    color:#D3F0D4;
}

What am I doing wrong?

Answer 1

dont apply those cumbersome class changing methods. Instead use the css selector

.datagrid tr:nth-child(even):hover {background: #CCC}
.datagrid tr:nth-child(odd):hover {background: #FFF}

js fiddle

Answer 2

It works without needing the .alt selector.

See http://jsbin.com/ixokoj/2/edit

Answer 3

instead of

.datagrid tr:hover, .datagrid tr.alt:hover 

{


    background-color:#497A43;


    color:#D3F0D4;


}

use the following

.datagrid tr.alt:hover 

{

    background-color:#497A43;

    color:#D3F0D4;


}

The above will apply the background color and color to the rows which has class as "alt" and only when they are hovered.

Hope this helped.