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