2013-02-05 141 views
4

我對CSS有點新,並且遇到了這個小問題。當我將鼠標懸停在該行上時,我想要更改表格的背景顏色。我寫了下面的代碼,但不知何故,只有懸停部分似乎沒有工作。我曾嘗試在Google Chrome v24和Firefox v18中查看。誰能說我哪裏錯了。謝謝。爲什麼tr:hover無法正常工作

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

回答

11

這是工作,你只是沒有看到它正常工作,因爲td元素的background-color隱藏着tr元素的background-color。相反使用:

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

感謝David..it工作:) –

+0

非常歡迎,我很高興得到了幫助! =) –