logo标签列表

为什么 tr:hover 没有改变背景颜色

htmlcsshtml-table
4

我对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>
1个回答
13

它正在工作，只是因为元素的background-color覆盖了元素的background-color，所以你看不到它工作。可以尝试使用以下代码：

tr:hover td {
    background-color: blue;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接