Styling the Hover State of a CSS Sprite-Based Navigation Bar

Without a doubt, CSS sprites are a handy approach that can be used in a great diversity of contexts and situations due to their inherent flexibility. Even so, they really shine when you're building eye-catching navigation bars whose structure must be based on clean and standard semantic markup.

Therefore, if you’re a web designer who wants to learn how to create a couple of appealing navigational bars by taking advantage of the functionality provided by both CSS sprites and image replacement, then this series of tutorials may be the material that you need to read.

Of course, if you already had the chance to take a peek at the introductory part of this series, where I started building the first of the aforementioned navigation bars, then you probably have a clear idea of how to use the power of CSS sprites to give this user interface structure a pleasant look.

In that tutorial I explained how to define the visual presentation corresponding to the “normal” state of each section of the navigational bar by manipulating just the X and Y coordinates of a single background image. This was a pretty straightforward process if you had at least a vague idea of how to handle the  "background-position” CSS property.

Having reached that point in the construction of this example links bar, I must now demonstrate how to utilize CSS sprites to style the “hover” state of the sections comprising the bar.

That’s exactly the topic that I’ll be covering in the next few lines. Thus, to learn the full details of this new styling process, click on the link below and start reading now.