td:hover

injhomosa · #1 (**permalink**) 20/06/2012, 14:00

Hola a todos....
Necesito que al pasar el cursor por el td cambie de color el td y tan bn su contenido, es decir, las letras tengo esto:

#boton td:hover{
background-image:url(../../img/fondo-boton2.png);
color:#030303;
padding-left: 33px;
padding-top: 18px;
height:46px;
}

el td cambia de fondo pero las letras no cambian. la otra forma seria
#boton a:hover{
color:#030303;
}
pero esta no me sirve, ya q funciona solo si se pasa el cursor por el link, y necesito q cambie al pasar el mause por el td

Gracias por sus aportes.

killerchess · #2 (**permalink**) 20/06/2012, 14:22

Pudieses cambiar el elemento a para que ocupe todo el td, esto te debería servir:

#boton a{
display:block;
width:100%;
}

injhomosa · #3 (**permalink**) 20/06/2012, 14:29

puedes ser mas explicito?

furoya · #4 (**permalink**) 20/06/2012, 15:46

A mi me cambia perfectamente. ¿Qué navegador estás usando? Por que los IE más viejos no aceptan el cambio fuera de los enlaces.

Código:

<style type="text/css">
#boton td{
font-weight: bold;
background-color: yellow;
color: red;
padding-left: 33px;
padding-top: 18px;
height:46px;
}
#boton td:hover{
background-color: silver;
color:#030303;
}
</style>

<table><tr id=boton><td> qwertyuiop </td></tr></table>

noruas · #5 (**permalink**) 20/06/2012, 20:16

¿El texto que se ve en los td son enlaces?

Por que si es asi, la propiedad "color" no cambiara el color, tienes que cambiar el color del enlace...

Si es eso, hechale un vistazo a esto:
http://www.echoecho.com/csslinks.htm

furoya · #6 (**permalink**) 21/06/2012, 08:28

Me parece que ahí está el punto.
Como injhomosa no puso el HTML, tenemos que adivinar. Pero creo que las celdas son "botones" que tienen solamente un enlace.
Entonces vale la recomendación de killerchess, aunque olvidó avisar que la etiqueta anchor debe tener display: block; o inline-block, si hay más texto en línea.

Recordemos que el objetivo del :hover es facilitar la accesibilidad, no hacer decoraciones animadas. Con CSS se podrá cambiar el formato de la celda y el enlace que contiene, pero casi conviene usar javascript. El código también puede ser largo, así que la ventaja está en que JS sí se puede usar perfectamente para hacer animaciones.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
function cambia(T) {

if(T.className == "botonD"){
T.className = "botonA";
T.firstChild.className = "linkA";
//alert(T.firstChild.nodeName)
}

else{
T.className = "botonD";
T.firstChild.className = "linkD";
}

//alert(T.className+" - "+T.firstChild.className)

}
</script>
<style type="text/css">

.botonD {font-weight: bold; background-color: yellow; color: red; padding-left: 33px; 
padding-top: 18px; height:86px; width:146px; }
.linkD {background-color: yellow; color: red; text-decoration: none; }

.botonA{font-weight: bold; background-color: silver; color: black; padding-left: 33px; 
padding-top: 18px; height:86px; width:146px; }
.linkA{background-color: silver; color:black; text-decoration: underline; }

</style>
</head>
<body>

<table><tr>
<td class=botonD onmouseover=cambia(this) 
onmouseout=cambia(this)><a href="#" 
class=linkD>asdfghjk</a> 
</td>
</tr></table>

</body>
</html>

Un detalle, porque no estamos en el foro de javascript: en el ejemplo el evento está en la celda, y usando firstChild apunto al primer elemento "hijo" de td, que debería ser el link. Pero resulta que si entre el cierre </td> y el comienzo de la etiqueta <a ... dejo un espacio o un salto de línea, la mayoría de los navegadores los interpretan como el primogénito, y le van a querer aplicar el formato a ese texto (espacio, salto, letra...) y no al enlace, que ya sería secundogénito. por eso en el ejemplo están pegados.

P.D.: ¿Y no tenías un tutorial más viejo para recomendar?

killerchess · #7 (**permalink**) 21/06/2012, 13:35

Cita:

puedes ser mas explicito?

A ver, tenemos dos tipos de elementos, los de bloque (block) y entre lineas (inline), los de bloque(<div><p>) ocupan por defecto el 100% del ancho de donde se encuentren, los 'inline'(<a><span><b>) adaptan su ancho a lo que llevan dentro. La etiqueta <a> es un elemento inline, por eso solo al ubicarte encima del texto(contenido dentro de <a></a>) se produciría el efecto a:hover, utilizando la propiedad 'display:block;' estamos convirtiéndola a un elemento en bloque, por lo que ocupará todo el ancho de donde se encuentre, para tu caso, el ancho del td. De ésta forma pareciera que el hover fuese sobre el <td>, pero en realidad es el <a> que ahora ocupa todo el ancho del td.

injhomosa · #8 (**permalink**) 21/06/2012, 23:27

Muchas gracias a todos por sus aportes, fueron muy valiosos, si, el proble era el <a> las propiedades q le estaba aplicando a los td habia solo q aplicarlas al <a> osea esto:

#links{
text-align:center;
color:#080000;
font-size:12;
margin-bottom:20px;
}
#links a{
color:#080000;
text-transform:uppercase;
}
#links a:hover{
color:#6C6C6C;
text-decoration:underline;
text-transform:uppercase;
}

lo q uds ya dijeron, pero por si quizas a alguien le sirve