我对 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>