Alguien me puede explicar porque no funciona el hover
Código HTML:
<html>
<head>
<style>
table.datos {
border-collapse: collapse;
border: 1px solid #03476F;
font: normal 11px verdana, arial, helvetica, sans-serif;
color: #363636;
background: #D5E7FB;
}
caption {
text-align: center;
font: bold 18px arial, helvetica, sans-serif;
background: transparent;
padding:6px 4px 8px 0px;
color: #03476F;
text-transform: uppercase;
}
.datos td, th {
border: 1px dotted #03476F;
padding: .4em;
color: #363636;
}
thead th, tfoot th {
font: bold 11px verdana, arial, helvetica, sans-serif;
border: 1px solid #03476F;;
text-align: left;
background: #4591AD;
color: #FFFFFF;
padding-top:3px;
}
tbody td a {
background: transparent;
text-decoration: none;
color: #363636;
}
tbody td a:hover {
background: #C2F64D;
color: #363636;
}
tbody th a {
font: normal 11px verdana, arial, helvetica, sans-serif;
background: transparent;
text-decoration: none;
font-weight:normal;
color: #363636;
}
tbody th a:hover {
background: transparent;
color: #363636;
}
tbody th, tbody td {
vertical-align: top;
text-align: left;
}
tfoot td {
border: 1px solid #03476F;
background: #4591AD;
padding-top:3px;
color: #FFFFFF;
}
.odd {
background: #E8F2FC;
}
.minimo {
background: #669933;
}
.off {
background: #FFFFFF;
}
.cancelado {
background: #FF3300;
}
tbody tr:hover {
background: #FFD800;
border: 1px solid #03476F;
color: #FFFFFF;
}
tbody tr:hover th,
tbody tr.odd:hover th {
background: #E0FAC5;
color: #FFFFFF;
}
</style>
</head>
<body>
<table width="248" border="1" class="datos">
<caption>
tema
</caption>
<thead>
<tr>
<th width="78">aaaaaa</th>
<th width="88">aaaaaa</th>
<th width="60">aaaaaa</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr class="cancelado">
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr class="odd">
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
</tbody>
</table>
</body>
</html>