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?
