Los rollovers son los efectos que se muestran a la hora de poner el ratón sobre un elemento caliente, es decir, un elemento sobre el que podemos hacer clic. Los rollovers son interesantes porque ofrecen al usuario una señal para que éste sepa que puede hacer clic para ver alguna información.

Al principio los rollovers se hacían con Javascript, pero desde hace tiempo no hace falta ninguna programación para realizar un rollover, como ya explicamos en el artículo Realizar un rollover sólo con CSS, que permite incluso utilizando imágenes para realizar el efecto del rollover. Para ello utilizamos el pseudo-element hover, que permite especificar un estilo cuando el usuario coloca el ratón sobre un elemento.

Lo más seguro es que, si estás leyendo este artículo de DesarrolloWeb.com, ya sepas lo que es un rollover y quizás tengas un problema al trabajar con rollovers de tipo borde. Con CSS podemos crear un efecto de enlace caliente por medio de un borde que le colocamos en un elemento HTML. A la hora de pasar el ratón, se puede crear el rollover colocando un borde en el elemento. El problema es que ese borde a veces nos descuadra el diseño que habíamos compuesto con tanto trabajo por nuestra parte.

Veamos primero un par de ejemplos de rollover con bordes, que servirán para entender bien qué es lo que queremos decir y qué problema puede darnos este efecto en nuestro diseño.

Tenemos dos ejemplos, que hemos creado para ilustrar primero el problema y la solución propuesta.

En el ejemplo problemático vemos que al pasar el ratón por las imágenes, se descuadra el diseño, creando unos espacios en blanco poco deseables entre las imágenes de la botonera.

En ese primer ejemplo se ha utilizado la siguiente declaración de estilos, que sería la más fácil de adoptar en un primer momento.

#ejemplo-problema a img, #ejemplo-problema a {
   border: none; float: left;
}
#ejemplo-problema a:hover {
   border: 3px solid #ff8800;
}

Ahora bien, tenemos un segundo ejemplo que tiene un comportamiento mucho mejor, ya que con CSS hemos configurado la botonera para que el borde que aparece en las imágenes para hacer el rollover aparezca por dentro de la imagen en vez de por fuera.

La solución pasa por ponerle un margen negativo a la imagen sobre la que queremos colocar el borde. El margen tiene que ser del mismo tamaño que el borde que se haya definido en la pseudo-clase hover.

#borde-interior a img, #borde-interior a {
   border: none;
   overflow: hidden;
   float: left;
}
#borde-interior a:hover {
   border: 3px solid #ffcc33;
}
#borde-interior a:hover img {
   margin: -3px;
}

Este ejemplo lo hemos sacado de un artículo en inglés publicado en el sitio CSS Tricks, donde además podemos ver una segunda solución que no he comentado aquí porque no me funciona en Explorer. Espero que, si tenías efectos poco deseables con el borde de los elementos al hacer un hover, con esta técnica puedas solucionarlos.

De nuevo, dejo el enlace al ejemplo de rollover CSS basado en bordes.