Styling the Hover State of a CSS Sprite-Based Navigation Bar
In this second part of a series, I show you how to use CSS sprites to create the visual style corresponding to the “hover” state of each section of the sample navigation bar. You will see that this process relies heavily on manipulating the X and Y coordinates of the bar’s background image. This requires doing some math, but nothing especially complicated.
Styling the Hover State of a CSS Sprite-Based Navigation Bar - Creating the hover state for each section of the navigation bar (Page 3 of 4 )
As I said in the segment that you just read, defining the visual style corresponding to the “hover” state of each section that comprises the navigation bar doesn’t different too much from styling its “normal” versions. Basically, the entire styling process is reduced to assigning to the bar’s background image the appropriate X and Y coordinates, thus displaying its correct portion.
Does this explanation sound a bit confusing to you? Well, fear not and pay attention to the following CSS fragment, which should quickly dissipate your confusion:
There you have it. As you can see above, creating the “hover” state of each section of the sample links bar requires only moving the pertinent background image to the proper position on screen, thanks to the manipulation of its X and Y coordinates. In this particular case, the CSS code that performs this process seems to be somewhat complex, but that’s simply a misleading impression caused by the number of sections that need to be styled.
Now that you've grasped the logic that drives the previous styling procedure, it’s time to how this set of CSS styles can be tied to the structure of the web page shown in the preceding segment.
This will be done in the last section of this tutorial. So click on the link below and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
