为什么tr：hover无法更改背景颜色

Question

I am a bit new to CSS and am stuck with this small problem. 我对CSS有点陌生，并且陷入了这个小问题。 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. 我曾尝试在Google Chrome v24和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>

Answer 1

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. 这是工作，你只是没有看到它正常工作，因为td元素的background-color被隐藏background-color中的tr元素。 Instead use: 而是使用：

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

为什么tr：hover无法更改背景颜色

问题描述

1 个解决方案

解决方案1
11 已采纳 2013-02-05 18:01:07

为什么tr：hover无法更改背景颜色

问题描述

1 个解决方案

解决方案1 11 已采纳 2013-02-05 18:01:07

解决方案1
11 已采纳 2013-02-05 18:01:07