In this introductory article in a four-part series, I provide you with an elementary but illustrative example that shows how to use the “hover” CSS pseudo-class for highlighting different sections of an (X)HTML document.
Rediscover the Hover CSS Pseudo-Class - Defining some simple CSS styles (Page 3 of 4 )
If you’ve ever used the “hover” CSS pseudo-class before for creating fancy navigation bars or rollover effects on hyperlinks, then you’ll find the following CSS snippet easy to grasp. It uses the same driving logic, but in this case for changing the background color of the sections of the web page created in the previous segment.
Now, take a look at the styles below:
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #eee;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #fff;
}
/* style header section */
#header {
padding: 20px;
}
#header:hover {
background: #c0ffc0;
}
/* style content section */
#content {
padding: 20px;
}
#content:hover {
background: #c0ffc0;
}
/* style footer section */
#footer {
padding: 20px;
}
#footer:hover {
background: #c0ffc0;
}
</style>
Apart from applying a basic style to the entire XHTML document, the above code sample shows how easy it is to create a rollover effect on each of its sections. In this particular example, the “hover” state of the sections switches to a different background color, but as you may guess it’s possible to apply all sorts of style variations, such as adding borders, changing background images and so forth. For obvious reasons, the most relevant detail to notice here is unquestionably the use of the “hover” pseudo-class with divs, which used to be impossible to accomplish due to the IE-related incompatibility discussed at the beginning.
Well, at this point I’ve partially reached the goal that I imposed on myself for this introductory article: on one hand, there’s a basic, text-based web page made up of the classical header, content and footer sections, while on the other, there are the CSS styles that create a rollover effect on these sections.
So, what’s the next logical step? Yes, you guessed right! Naturally, it’s necessary to link these two layers to each other to finish this example and get it ready for testing.
This will be done in the last section of this tutorial, so read the next segment. It’s only one click away.
Style Sheets 
HTML5 Boilerplate Introduction
