Cambiar color td

Adler · #1 (**permalink**) 11/12/2007, 08:17

Hola, el problema que tengo y no que no logro solucionar es cambiar el color del TD cuando el puntero esta sobre el.

Esto es lo que tengo hecho

Código HTML:

<html>
<head>
<style type="text/css">
.seccion_par_autor {
background: #fff none repeat scroll 100%;
color: #59616e;
margin:3px;

.seccion_par_autor a:link, .seccion_par_autor a:visited { 
color: #000;
text-decoration: none;
}

.seccion_par_autor a:hover, .seccion_par_autor a:active {
color: #f49f00;
text-decoration: underline;
}

.td_spar {
font:13px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.td_spar:hover {
background: #eee none repeat scroll 0%;
}
</style>
</head>
<body>
<table border="0px">
<tr>
<tr>
<td class="seccion_par_autor td_spar"><a href="#"><strong>Una prueba</strong></a></td>
</td>
</tr>
</table>
</body>
</html>

Gracias

Eourus · #2 (**permalink**) 11/12/2007, 08:59

te falta algo como:

.td_spar td:hover { background-color:red; }

webosiris · #3 (**permalink**) 11/12/2007, 23:00

Cita:

background: #eee none repeat scroll 0%;

eso realmente no se como comerlo

en serio ¿que quisistes poner? ¿Qué tenga un fondo color #eee?
Entonces "background: #eee" y sobra todo lo demás... además ojo que en ie 6 el :hover solo funciona aplicado a enlaces, salvo que uses un javascipt llamado scriptIE7

andriuch · #4 (**permalink**) 12/12/2007, 06:46

Lo primero, cuando pongas un codigo asegurate que está bien, hay un estilo que no tiene llave de cerrado, y a la tabla le sobra un <tr> y un </td>.

En cuanto a tu pregunta, hover solo se aplica a los links como bien ha dicho webosiris. Yo lo que haria seria una funcioncilla en javascript que me cambiase la clase de la celda:

Código HTML:

<html>
	<head>
		<style type="text/css">
			.seccion_par_autor {
				background: #fff none repeat scroll 100%;
				color: #59616e;
				margin:3px;
				}

			.seccion_par_autor a:link, .seccion_par_autor a:visited { 
				color: #000;
				text-decoration: none;
				}

			.seccion_par_autor a:hover, .seccion_par_autor a:active {
				color: #f49f00;
				text-decoration: underline;
				}

			.td_spar {
				font:13px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
				background: white;
				}

			.td_sparhover {
				font:13px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
				background: #eee none repeat scroll 0%;
				}

		</style>
		<script type="text/javascript">
			function cambiacolor()
			{
				document.getElementById("tdlink").className = "seccion_par_autor td_sparhover";
			}
			function devuelvecolor()
			{
				document.getElementById("tdlink").className = "seccion_par_autor td_spar";
			}
		</script>
	</head>
	<body>
		<table border="0px">
			<tr>
				<td id="tdlink" class="seccion_par_autor td_spar" onMouseOver="cambiacolor()" onMouseOut="devuelvecolor()"><a href="#"><strong>Una prueba</strong></a></td>
			</tr>
		</table>
	</body>
</html>

Espero que te sirva, un saludo.

Adler · #5 (**permalink**) 12/12/2007, 07:48

Gracias a los 3 por contestar.

Voy por partes

Lo que sugiere Eourus no funciona, ya lo había probado. Y no funciona

Con respecto a lo que comenta Andriuch, claro que una función lo solucionaría.
Pero antes de hacer eso yo haría
<td class="seccion_par_autor" OnMouseOver="this.className='td_spar'">
No es lo que busco

Así que el premio se lo lleva. No sabía que ie 6 solo acepta :hover en los vínculos. Yo lo probaba en FF y funciona, pero ni tan siquiera pensé que el pu** ie no lo aceptaba.

Gracias otra vez a los 3

Eourus · #6 (**permalink**) 12/12/2007, 09:07

Me he fijado que te puse td:hover en vez de tr:hover. Pero claro en IE 6 nada de nada