La FAQ ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas? tiene
Pertenece a la categoría:
<html>
<head>
<title>Prueba CSS</title>
<style type="text/css">
a.enlace {
color: #0000D9;
width: 100%;
height: 100%;
text-decoration: none;
}
a.enlace:hover {
text-decoration: none;
background: #77AADD;
}
table {
border: 1px solid red;
width: 20%;
}
td {
align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a class="enlace" href="#">enlace 1</a>
</td>
</tr>
<tr>
<td>
<a class="enlace" href="#">enlace 2</a>
</td>
</table>
</body>
En el artículo llamado Realizar un rollover sólo con CSS y utilizando imágenes de DesarrolloWeb.com se muestra como hacer enlaces que ocupen todo el espacio donde están situados
![]() | Complementar la respuesta |
![]() | Volver al árbol de categorías |
![]() |
Por: angelito | 24/7/2003
0 votos |
Por: shen | 18/3/2005
0 votos |
Por: Mago | 03/2/2006
0 votos |
<td align="middle" bgcolor="#DDDDDD" onmouseover='this.style.background="#FF0000"' onmouseout='this.style.background="#DDDDDD"'>
Por: Miguel Angel Alvarez | 06/2/2006
1 voto |
El problema es cuando le aplicamos un width al estilo de las capas donde colocamos los enlaces, que se pierde el efecto de que el link ocupe todo el espacio de su contenedor.
Veamos el código.
<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>
Insisto: para que los enlaces ocupen todo el espacio disponible, tiene que asignarse el estilo display:block
Para ver más FAQ relacionadas accede a las categorías:
![]() | Volver al árbol de categorías |