Rollover de bază ca CSS Sprite - CSS-Tricks

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

Înălțimea și lățimea setate asigură afișarea numai a unei porțiuni din graficul sprite.png.webp. Rollover schimbă poziția imaginii de fundal, dezvăluind o zonă diferită a imaginii.

Vedeți Pen KBjZwg de Geoff Graham (@geoffgraham) pe CodePen.