Question

我对CSS有点新，我遇到了这个小问题。当我将鼠标悬停在该行上时，我想要更改表格行的背景颜色。我已经编写了下面的代码，但不知何故只有悬停部分似乎不起作用。我尝试在Google Chrome v24和Firefox v18中查看。谁能说我哪里错了。

<!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

它正常运行，您只是看不到它，因为td元素的background-color隐藏了background-color元素的tr。而是使用：

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

为什么tr：悬停不改变背景颜色

1 个答案: