Foros del Web » Creando para Internet » CSS »

td:hover

Estas en el tema de td:hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/06/2012, 14:00
Avatar de injhomosa  
Fecha de Ingreso: febrero-2012
Mensajes: 26
Antigüedad: 12 años, 8 meses
Puntos: 1
Pregunta td:hover

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.
  #2 (permalink)  
Antiguo 20/06/2012, 14:22
 
Fecha de Ingreso: noviembre-2003
Mensajes: 61
Antigüedad: 21 años
Puntos: 0
Respuesta: td:hover

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

#boton a{
display:block;
width:100%;
}
  #3 (permalink)  
Antiguo 20/06/2012, 14:29
Avatar de injhomosa  
Fecha de Ingreso: febrero-2012
Mensajes: 26
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: td:hover

puedes ser mas explicito?
  #4 (permalink)  
Antiguo 20/06/2012, 15:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: td:hover

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>
  #5 (permalink)  
Antiguo 20/06/2012, 20:16
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 4 meses
Puntos: 11
Respuesta: td:hover

¿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
  #6 (permalink)  
Antiguo 21/06/2012, 08:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: td:hover

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?
  #7 (permalink)  
Antiguo 21/06/2012, 13:35
 
Fecha de Ingreso: noviembre-2003
Mensajes: 61
Antigüedad: 21 años
Puntos: 0
Respuesta: td:hover

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.

Última edición por killerchess; 21/06/2012 a las 13:40 Razón: Faltaron acentos
  #8 (permalink)  
Antiguo 21/06/2012, 23:27
Avatar de injhomosa  
Fecha de Ingreso: febrero-2012
Mensajes: 26
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: td:hover

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

Etiquetas: contenido, hover, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:02.