STYLE SHEETS

Rediscover the Hover CSS Pseudo-Class

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 17, 2009

TABLE OF CONTENTS:

Once the raw markup had been properly set, I’ll be using the corresponding pseudo-class to change the background color of each individual section when the mouse is placed over it. Since my initial plan is easy to follow, pay attention to the following code sample, which builds the sample XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Section highlight using :hover CSS pseudo class</title>

</head>

<body>

<h1>Section highlight using :hover CSS pseudo class</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</div>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Well, if I had to build the most basic web page ever, the one above would fall under this category. It's comprised of three primary containers aside from the main wrapper, identified as “header,” “content” and “footer” respectively. Undoubtedly, the structure of this sample page is very similar to the ones that you’ve coded hundreds of times before when building your own websites, so I’m not going to spend a long time discussing its finer details.

However, it’s worthwhile to note an interesting thing here. Suppose for a moment that you wish to highlight each of the web page’s sections by modifying their assigned background color each time a user places the mouse over them. In the bad old days of Internet Explorer 6 and below, this could be only achieved by using JavaScript (or even worse, Flash), due to the lack of support for the “hover” pseudo-class for other selectors aside from <a> elements.

As IE 7 and 8 are gradually being adopted by users worldwide, it’s now possible to produce this highlighting effect by coding a few simple CSS styles without having to rely on scripting being enabled in the client -- which may produce unexpected results.

Thus, in the section to come I’m going to add to our web page the set of CSS styles required to change the background color of each of its sections in response to a “mouseover” event.

To learn the full details of this process, click on the link below and keep reading.

Next: Defining some simple CSS styles >>