Para cambiar el color de una fila al evento onmouseover nos podemos apoyar en la pseudo clase :hover de css. El problema es que Internet Explorer no entiende :hover. Para solucionarlo podemos optar por utilizar javascritpt y añadir una clase en función de si estamos sobre la fila o no. javascript es una opción muy potente para solucionar estas pequeñas cosas. El ejemplo completo sería:
javascript:
<script language="javascript" type="text/javascript">
function ColorFila() {
var rows = document.getElementsByTagName("tr");
for(var i in rows) {
rows[i].onmouseover = function() {
this.className = "resaltar";
}
rows[i].onmouseout = function() {
this.className = null;
}
}
}
onload= ColorFila;
</script>
CSS:
<style type="text/css">
.distabla tr:hover {
background-color: #DFE7F2;
color: #000000;
}
.distabla tr.resaltar {
background-color: #DFE7F2;
color: #000000;
}
.distabla td {
border: 1px solid #CCCCCC;
}
.distabla th {
border: 1px solid #CCCCCC;
background-color: #CCCCCC;
}
</style>
HTML:
<table class="distabla"> <caption>Trabajadores</caption> <tbody> <tr> <th width="122">Nombre</th> <th width="98">Edad</th> </tr><tr> <td>Jose García</td> <td><div align="center">30</div></td> </tr><tr> <td>Pedro Perez</td> <td><div align="center">22</div></td> </tr><tr> <td>Lucía Hernando</td> <td><div align="center">24</div> </td> </tr><tr> <td>Juan Martí</td> <td><div align="center">24</div></td> </tr> </tbody> </table>




