Cambiar color de letra dentro de celda

carceron · #1 (**permalink**) 12/10/2007, 16:48

Hola...tengo el siguiente ejemplo

<table>
<tr>
<td id=celda1 bgcolor=red>
<a href='www.google.com'>texto dentro de celda</a>
</td>
</tr>
</table>

Necesito que al pasar el mouse sobre la celda me cambie tanto el color de fondo de la celda como del color del enlace....

Ya puedo hacerlo si el texto no estuviera dentro de un enlace pero no sé como hacer para que me modifique el color del texto ya que se encuentra dentro de <a></a>.

Gracias !!!

Snd234 · #2 (**permalink**) 12/10/2007, 17:18

Al ser un enlace podrias utilizar hojas de estilos para asignarle algun color al poner el mouse sobre el enlace.

Código HTML:

 a:hover {
color: #F5F5F5
}

Claro que eso cambiaria el color de todos los enlaces de tu pagina al pasar el mouse sobre uno.

Ahora para ser mas especifico y tener un color especial solo a los enlaces que estan dentro de tu tabla podrias usar:

Código HTML:

 #id_tabla a:hover {
color: #F5F5F5
}

carceron · #3 (**permalink**) 12/10/2007, 17:26

Creo que me falto decir que necesito hacerlo con javascript, en el evento onMouseOver ...

Tambien aclaro que no puedo colocarle un ID al enlace porque el enlace me lo entrega una funcion ya construido y no puedo manipularlo

En el ejemplo que me pones:
#id_tabla a:hover {
color: #F5F5F5
}

debe ir espacio entre #id_tabla y a:hover? o debe ir algun caracter que los una ?

Gracias

carceron · #4 (**permalink**) 12/10/2007, 17:30

Algo m'as ....

El efecto lo necesito al pasar el mouse sobre la celda, no sobre el enlace, por eso no me puedo ayudar mucho con los estilos sino que necesito que al hacer el on MouseOver del td me cambie el color del texto (repito, que es un enlace)

Gracias

JavierB · #5 (**permalink**) 13/10/2007, 04:13

Hola carceron

Este código te puede servir:

Código PHP:

  <html>
<head>
<style type="text/css">
#celda1 a {width:100%; display:block}
#celda1 a:hover {
color: #F5F5F5
}
</style>
</head>
<body>
<table>
<tr>
<td id="celda1" style="width:200px; background:red">
<a href='www.google.com'>texto dentro de celda</a>
</td>
</tr>
</table>
</body>
</html>

Saludos,

carceron · #6 (**permalink**) 13/10/2007, 09:00

Off Course....me sirvió...

Muchas gracias JavierB !!!

derkenuke · #7 (**permalink**) 13/10/2007, 09:04

Aquí te dejo un ejemplo de cómo puedes hacerlo:

Código PHP:

  <script type="text/javascript">
<!--


function cambiarCol(celda) {
    var elBg = celda.style.backgroundColor;
    if( elBg === "red" ) {
        celda.style.backgroundColor = "blue";
        celda.style.color="red";
        celda.getElementsByTagName("A")[0].style.color = "yellow";
    }
    else {
        celda.style.backgroundColor = "red";
        celda.style.color="green";
        celda.getElementsByTagName("A")[0].style.color = "blue";
    }
}


// -->
</script>



<table>
    <tr>
        <td style="background-color:red; color:green; " onmouseover="cambiarCol(this)" onmouseout="cambiarCol(this)">
            Texto normal <a href='www.google.com'>texto dentro de celda</a>
        </td>
    </tr>
</table>

Aunque creo que lo más cómodo (y correcto) sería apoyarte en las hojas de estilo CSS tal y como te ha dicho Snd234. Deberías declarar un estilo normal y otro estilo normal_encima y con javascript cambiar el atributo class (className).

Sólo te lo he preparado así para que veas que es posible hacerlo sin className.

Un saludo

EDIT: Ups, postee tarde, lo siento Javier