Cambiar el color de las filas al evento onmouseover

0 - , , , - 17/11/2005 00:00:00

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>

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha