Home/ Questions/Q 9244537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:03:33+00:00

I am a bit new to CSS and am stuck with this small problem.

  • 0

I am a bit new to CSS and am stuck with this small problem. I want the background color of a table row to change when I hover over that row. I have written the code below but somehow only the hovering part does not seem to work. I have tried viewing in Google Chrome v24 and Firefox v18. Could anyone say where am I going wrong. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
    table.contacts
    { 
        width: 580px;
        background-color: #fafafa;
        border: 1px #000000 solid;
        border-collapse: collapse;
        border-spacing: 0px; 
    }

    .contacts th
    { 
        background-color: #99CCCC;
        font-family: Verdana;
        text-align: left;
        border-bottom:1px #000000 solid;
        font-weight: bold;
        font-size: 12px;
        padding:4px;
        margin:4px;
        color: #404040; 
    }

    .contacts td
    {
        border-bottom: 1px #6699CC dotted;
        text-align: left;
        font-family: Verdana, sans-serif, Arial;
        font-weight: normal;
        font-size: .7em;
        color: #404040;
        background-color: #fafafa;
        padding:4px;
        margin:4px;
    }

    table tr:hover
    {
        background-color:blue;
    }
</style>
</head>

<body>
    <table class="contacts" cellspacing="2">
        <tr>    
            <th>Subscription Scheme</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>Monthly Subscription(Family)</td>
            <td>Rs 200</td>
        </tr>
        <tr>
            <td>Monthly Subscription(Individuals)</td>
            <td>Rs 100</td>
        </tr>
        <tr>
            <td>Monthly Subscription(Company)</td>
            <td>Rs 500</td>
        </tr>
        <tr>
            <td>Yearly Subscription(Family)</td>
            <td>Rs 2000</td>
        </tr>
        <tr>
            <td>Yearly Subscription(Company)</td>
            <td>Rs 5000</td>
        </tr>
        <tr>
            <td>Festival Subscription</td>
            <td>Rs 1000</td>
        </tr>

    </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is working, you’re just not seeing it work because the td element’s background-color is hiding the background-color of the tr element. Instead use:

    tr:hover td {
    background-color: blue;
}
    • 0