Ver Mensaje Individual
  #2 (permalink)  
Antiguo 11/09/2008, 10:28
haga41
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 15 años, 10 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 10:51