EFFECTS - CSS: Professional Techniques for Modern Layout - page 178

Figure 5-27: The sprites.
h ere's a reason for all that blank space between the two, as you'll see in a moment. With a
little CSS, you get the icons showing up next to links in a navbar.
.navbar li a { background : url(sprites.png) 5px 50% no-repeat ;
padding-left : 30px ;}
h at places them right in the vertical midpoint of the link, all the way to the let edge. Now to
make the icon “light up” when the link is hovered (see Figure 5-28), change the position of the
background image.
.navbar li a:hover { background-position : -395px 50% ;}
180
Figure 5-28: Icons, both hovered and not.
h e negative horizontal of set is what does it: It pulls the background image 395 pixels to the
let . h at's 400 pixels of blank space in sprites.png minus the 5px of of set in the original
rule. Since the “lit up” variant of the icon is 400 pixels from the let edge of the background
image, it lands right in the same place.