Foros del Web » Creando para Internet » CSS »

Cambiar fondo de celda cuando pase el puntero

Estas en el tema de Cambiar fondo de celda cuando pase el puntero en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/09/2008, 11:18
 
Fecha de Ingreso: septiembre-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Cambiar fondo de celda cuando pase el puntero

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.
  #2 (permalink)  
Antiguo 11/09/2008, 11:28
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Cambiar fondo de celda cuando pase el puntero

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">&nbsp;</td>
<td width="61">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr class="colores2">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="colores3">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Última edición por haga41; 11/09/2008 a las 11:51
  #3 (permalink)  
Antiguo 11/09/2008, 12:14
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años
Puntos: 56
Respuesta: Cambiar fondo de celda cuando pase el puntero

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> 
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #4 (permalink)  
Antiguo 11/09/2008, 15:10
 
Fecha de Ingreso: septiembre-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Cambiar fondo de celda cuando pase el puntero

Gracias, ya esta aprendido.
Un saludo!
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 08:04.