Cambiar fondo de tabla

[hentai_nation]

Saludos Foreros.

Acabo de iniciarme con esto de CSS y he estado viendo la posibilidad de cambiar el color de fondo o imagen de una tabla al pasar el cursor por encime de el, y una vez que se quite el cursor, que regrese a la forma en que estaba antes.

He encontrado que poniendo el codigo directo en el HTML si lo puedo hacer, pero yo quiero hacerlo en una CSS separada, es decir, un archivo que contenga la instruccion, para no mezclar el codigo con el HTML original.

El codigo es este:

<TR>
<TD onmouseover="this.style.backgroundColor='#b0b0b0'; "
onmouseout="this.style.backgroundColor='#9b9b9b';"
background="test.htm"
bgColor=#9b9b9b>&nbsp;</TD>
</TR>

Espero puedan ayudarme una vez mas.

Gracias desde ya.

[jesusbet]

Pues puedes hacer una función en javascript, archivarlo en un archivo js y llamarlo como lo haces tú; en css podrías usar el hover, por ejemplo:

.class_de_tabla {
background-color: #000000;
}

.class_de_tabla:hover {
background-color: #ffffff;
}

Eso debería funcionar.

Saludos

[Manoloweb]

Desafortunadamente IE y otros navegadores no reconocen el pseudo-elemento :hover en ninguna otra cosa que no sea un link <a>.

Así que lo mas cercano a eso, es lo siguiente...

Mete en cada celda un elemento <a>, y luego a ese elemento dale la característica de display:block para que ocupe todo el espacio de la celda. Incluso puedes especificar un height...

Sobre ese elemento, puedes hacer ya tu :hover, :visited y demás para conseguir tu efecto sin javascript, sin hacks ( a menos que meter el <a> se considere uno [?]), y compatible con la mayoría de los browsers.

[iconogt]

Muy buen truquillo el de Manoloweb No se me había ocurrido y ya estaba por hacer la pregunta

Muchas gracias Manoloweb por tu aporte,
Slds..

[esteve]

Gracias Manoloweb!! Muy Buena Solución!