Cambiar fondo de celda cuando pase el puntero

superhec · #1 (**permalink**) 11/09/2008, 10:18

Hola.
Me gustaria crear una tabla en la que cambiase el color del fondo de una celda cuando pase el puntero por encima. Además, quiero que toda la celda sirva como link, y que cada una de ellas tenga un color de fondo distinto.
Buscando en el foro he encontrado esto:

<html>
<head>
<title>rollover css e imágenes</title>
<style type="text/css">
.navenlace{
margin:3 0 3 0px;
padding: 2px;
border: 1px solid #999999;
font-weight: bold;
}
.navenlace A{
color: #666666;
text-decoration: none;
display: block;
}

.navenlace A:hover{
background-color: #666666;
color: #ffffcc;
}
</style>
</head>
<body>

<div class=navenlace>
<a href="#">Enlace 1</a>
</div>
<div class=navenlace>
<a href="#">Link chulo</a>
</div>
<div class=navenlace>
<a href="#">Otras cosas</a>
</div>

</body>
</html>

Mas o menos me sirve, pero como podria aplicarlo para que cada celda tenga un fondo distinto?
De hecho no hay celdas, pero me conformo con algo parecido.
Gracias, un saludo.

haga41 · #2 (**permalink**) 11/09/2008, 10:28

En principio supongo que tendrías que crear estilos que fueran iguales pero cambiando el color de fondo para el hover, algo así:

<html>
<head>
<title>rollover css e imágenes</title>
<style type="text/css">
.navenlace{
margin:3 0 3 0px;
padding: 2px;
border: 1px solid #999999;
font-weight: bold;
}
.navenlace A{
color: #666666;
text-decoration: none;
display: block;
}

.navenlace A:hover{
background-color: #666666;
color: #ffffcc;
}
.navenlace2{
margin:3 0 3 0px;
padding: 2px;
border: 1px solid #000000;
font-weight: bold;
}
.navenlace2 A{
color: #666666;
text-decoration: none;
display: block;
}

.navenlace2 A:hover{
background-color: #FF0000;
color: #ffffcc;
}
.navenlace3{
margin:3 0 3 0px;
padding: 2px;
border: 1px solid #000000;
font-weight: bold;
}
.navenlace3 A{
color: #666666;
text-decoration: none;
display: block;
}

.navenlace3 A:hover{
background-color: #00FF00;
color: #ffffcc;
}
</style>
</head>
<body>

<div class="navenlace">
<a href="#">Enlace 1</a>
</div>
<div class="navenlace2">
<a href="#">Link chulo</a>
</div>
<div class="navenlace3">
<a href="#">Otras cosas</a>
</div>

</body>
</html>

Para las celdas te valdría con algo así:
<html>
<head>
<title>rollover css e imágenes</title>
<style type="text/css">
.rojo{
background-color: #FFFFFF;
}
.rojo:hover{
background-color: #FF0000;
}
.verde{
background-color: #FFFFFF;
}
.verde:hover{
background-color: #00FF00;
}
.azul{
background-color: #FFFFFF;
}
.azul:hover{
background-color: #0000FF;
}

</style>
<table width="356" border="1">
<tr>
<td width="130" class="rojo">rojo</td>
<td width="81" class="verde">verde</td>
<td width="123" class="azul">azul</td>
</tr>
<tr class="rojo">
<td>fila roja</td>
<td>fila roja</td>
<td>fila roja</td>
</tr>
<tr class="verde">
<td>fila verde</td>
<td>fila verde</td>
<td>fila verde</td>
</tr>
<tr class="azul">
<td>fila azul</td>
<td>fila azul</td>
<td>fila azul</td>
</tr>
</table>
</body>
</html>

Pero también podrías hacerlo asi:

<html>
<head>
<title>rollover css e imágenes</title>
<style type="text/css">
.colores td:hover{
background-color:#0000FF;
}
.colores2 td{
background-color:#F00;
}
.colores2 td:hover{
background-color:#FFFF00;
}
.colores3 td{
background-color:#F00;
}
.colores3 td:hover{
background-color:#00FF00;
}
</style>
<table width="523" height="163" border="1" cellpadding="5" cellspacing="5" >
<tr class="colores">
<td width="215"> </td>
<td width="61"> </td>
<td width="225"> </td>
</tr>
<tr class="colores2">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="colores3">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

America|UNK · #3 (**permalink**) 11/09/2008, 11:14

Con la misma clase, si quieres que se pinte todo el fondo, es obvio que debes quitar el padding, por cierto el margin no hará falta.

Código HTML:

<table class="navenlace" border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="#">Tedddddddddddddxt</a></td></tr>
<tr><td><a href="#">Tedxt</a></td></tr>
<tr><td><a href="#">Teddddddddxt</a></td></tr>
</table>

superhec · #4 (**permalink**) 11/09/2008, 14:10

Gracias, ya esta aprendido.
Un saludo!