Puedes hacerlo con CSS, aunque no te funcionará en IE6 y anteriores. Te pongo también la solución Javascript.
Pon esto entre <head> y </head>:
Código HTML:
<style type="text/css">
tr:hover { background: blue; }
</style> Y esta es la solución con Javascript (con comentarios condicionales para que sólo lo interprete IE6 y anteriores). Ponlo entre <head> y </head>:
Código HTML:
<!--[if lte IE 6]>
<script type="text/javascript">
function fuera(fila) {
fila.style.background='#fff';
}
function encima(fila2) {
fila2.style.background='blue';
}
</script>
<![endif]--> Y luego le tienes que poner al tr los atributos onmouseover="encima(this)" onmouseout="fuera(this)".
Aquí un ejemplo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabla coloreada al pasar por encima</title>
<style type="text/css">
tr:hover { background: blue; }
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
function fuera(fila) {
fila.style.background='#fff';
}
function encima(fila2) {
fila2.style.background='blue';
}
</script>
<![endif]-->
</head>
<body>
<table>
<tr onmouseover="encima(this)" onmouseout="fuera(this)">
<td>fkjalfja</td><td>fjklajf</td>
</tr>
<tr onmouseover="encima(this)" onmouseout="fuera(this)">
<td>fkjalfja</td><td>fjklajf</td>
</tr>
</table>
</body>
</html>