CODEWITHSUNDEEP
htmlcsshover
Bird87 ZA
Bird87 ZA

Reputation: 2160

Odd table rows not highlighting

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?

Upvotes: 0

Views: 655

Answers (3)

Narendra
Narendra

Reputation: 3117

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.

Upvotes: 0

Bhoot
Bhoot

Reputation: 400

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

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25455

It works without needing the .alt selector.

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

Upvotes: 0

Related Questions