cssbackgroundhovercss-tables

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 1px #ccc;}

Solution

  • <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;}