Pregunta: ¿Es posible construir un rollover con CSS?
¡Es posible!...
Como será construido:
Utilizaremos un
div, un elemento
a, y un
span para crear nuestro rollover.
Supongamos que nuestro rollover mide 100x50 pixeles.
El HTML quedará más o menos así:
<div id="resaltado">
<a id="sinresaltar" href="pagina.html"><span>Texto</span></a>
</div>
Y el código CSS así:
div#resaltado, a#sinresaltar{
height: 50px;
width: 100px;
}
div#resaltado{
background: url(resaltado.png);
}
a#sinresaltar{
display: block;
background: url(sinresaltar.png);
}
a#sinresaltar:hover{
background: transparent;
}
a#sinresaltar span{
display: none;
}
El div nos servira para precargar la imagen de resalte del rollover pues lo usamos como su fondo... que solo se descubrira cuando pase el ratón sobre a, de los contrario se verá el fondo de a, que es el rollover sin resaltar.
El span lo usamos para aquellos gestores de contenido no gráficos, para que el usuario tenga información sobre el enlace... En navegadores gráficos no se verá...
Voalá!!!!