CSS: Evitar peticiones innecesarias al cambiar el estilo de un enlace (ascensor)


Uno de los usos comunes en CSS es usar dos imágenes diferentes para un caso en el que dicho elemento está inactivo y nunca ha sido visitado (a:link) y otro cuando el ratón se sitúa encima (a:hover), queda activo (a:active) o ha sido visitado (a:visited).

Imaginemos que tenemos una imagen en la que aparece “Quiénes somos”, y que al poner el ratón encima (a:hover), queremos que aparezca rodeada con un círculo naranja.

Lo normal es pensar en dos imágenes separadas completamente distintas. Sin embargo, si lo hacemos así, al señalar por primera vez la imagen necesitaremos una nueva petición para traernos la nueva imagen. Por tanto, lo ideal es colocar ambas imágenes en una sola, así en una petición nos traemos todas aquellas que vayamos a usar.

El ejemplo práctico sería el siguiente: Imaginemos la siguiente imagen con dimensiones 250×90 px:

Imaginemos un menú en lista en el que cada ID de CSS será usado para mostrar diferentes imágenes. El código HTML sería algo así:

Con el siguiente código CSS, hacemos que la imagen se desplace -45px en el eje vertical (es decir, 45px hacia arriba, esto es, justo la mitad de la imagen). Recordemos que el comando background-position usa los parámetros xpos ypos;

Para verlo funcionando, click aquí.