Wicked Sick Wicked Sick - 26 days ago 8
HTML Question

How to create hover effect in html table using css?

i tried creating a hover effect using css, where if the user hovers through the table's rows, it will change the background-color to red. But i notice when i hover the rows, instead of filling up the whole row with red, it fills up only the individual cells.

Here is my code:



.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 TD:hover
{
background-color: red;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Test
</title>

<link href="GridviewScroll.css" rel="stylesheet" />
<style type="text/css">
BODY,TD
{
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
font-size: 12px;
color: #333333;
}
</style>
</head>
<body>
<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>

</body>
</html>





Answer Source

That happens, because you set the Hover Effect only to the td elements, not the whole row. If you remove the td from your css and apply the hover only to the tr Elements, it works.

Note: You have to remove the specific backgroundcolor of the td Elements, because they would override the tr:hover effect. Please take a look at the working snippet below.

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

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}
<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>