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.