Menu
I am a bit new to CSS and am stuck with this small problem. I want the background color of a table row to change when I hover over that row. I have written the code below but somehow only the hovering part does not seem to work. I have tried viewing in Google Chrome v24 and Firefox v18. Could anyone say where am I going wrong.
<!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>
409
It is working, you're just not seeing it work because the td element's background-color is hiding the background-color of the tr element. Instead use:
tr:hover td {
background-color: blue;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
