How to create hover effect in html table using css?

by Heshan Kithuldora

HTML

<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td><td rowspan="2">ListPrice</td><td 
rowspan="2">StandardCost</td><td colspan="2">Package</td><td 
rowspan="2">SafetyStockLevel</td><td rowspan="2">ReorderPoint</td><td 
rowspan="2">SellStartDate</td>
    </tr><tr class="GridviewScrollHeader">
        <td>Name</td><td>Number</td><td>Weight</td><td>Size</td>
    </tr><tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td><td>FR-M94B-38</td>
<td>1349.6000</td><td>739.0410</td><td>2.68</td><td>38</td><td>500</td>
<td>375</td><td>7/1/2005 12:00:00 AM</td>
    </tr><tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td><td>FR-M94S-38</td>
<td>1364.5000</td><td>747.2002</td><td>2.68</td><td>38</td><td>500</td>
<td>375</td><td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>

CSS

BODY,TD
    {
        font-family: Tahoma, Arial, Verdana;
        font-weight: normal;
        font-size: 12px;
        color: #333333;
    }
    .GridviewScrollHeader TH, .GridviewScrollHeader TD
{
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
vertical-align: bottom;
text-align: left;
}

.GridviewScrollItem TD
{
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}

.GridviewScrollItem:hover TD
{
background-color: red;
}