Rollover con CSS

Actualmente las posibilidades de las CSS nos permiten hacer Rollover sin necesidad de javaScript, como se hacía hace algún tiempo, más engorroso en todos los sentidos. Sobre todo para Google, al utilizar exclusivamente CSS dejamos el código más “limpio” para las lecturas de Google.

Definiendo estilos
Primero tenemos que definir los estilos del “botón”, el primer estado del rollover, y aplicarlos a la etiqueta
Lo único importante a destacar es la propiedad “display: block;” Con esto hacemos activa toda el área del “botón”, no sólo el texto, ya que por defecto la etiqueta tiene la propiedad “display: inLine”
Lo siguiente es definir los estilos del segundo estado del rollover. Y lo hacemos con la propiedad “hover” de la etiqueta , quedando la definición del estilo así:
.a:hover{
………….
}
Para este ejemplo sólo he cambiado la imagen de fondo, el color del texto y del borde, pero podemos utilizar cualquiera de las muchas propiedades de las CSS.

IMPORTATNTE: en el body tenemos que precargar la segunda imagen del rollover para que no se produzca un “salto” visual.

Descargar ejemplo