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

1 に答える 1

12

それは機能していますが、要素が要素の を隠しているため、機能していないtdだけbackground-colorです。代わりに次を使用します。background-colortr

tr:hover td {
    background-color: blue;
}
于 2013-02-05T18:01:07.333 に答える