Cambio de enlace básico como CSS Sprite - Trucos CSS

Tabla de contenido
a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )

La altura y el ancho establecidos garantizan que solo se muestre una parte del gráfico sprite.png.webp. El rollover cambia la posición de la imagen de fondo, revelando un área diferente del gráfico.

Vea el Pen KBjZwg de Geoff Graham (@geoffgraham) en CodePen.

Articulos interesantes...