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>
感謝David..it工作:) –
非常歡迎,我很高興得到了幫助! =) –