Rediscover the Hover CSS Pseudo-Class
(Page 1 of 4 )
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.
Even though the evolution of the CSS specification over the past few years has moved more slowly than expected, it’s fair to say that it has reached a level of maturity that lets web designers control with relative ease the way that web pages are rendered across several browsers.
Underneath this pleasant and seemingly peaceful ocean, though, there’s still troubled waters that aren’t going to calm down any time soon. As you may know, there are numerous browser incompatibilities that still need to be solved, along with new and promising features that lack proper support (if any). These are serious constraints, especially when it comes to defining a consistent visual presentation of (X)HTML elements.
However, in the middle of this problematic scenario, many web designers feel that their prayers have finally been heard, particularly by Microsoft, as the release of both Internet Explorer 7 and 8 incorporated the much-desired support for the “hover” CSS pseudo-class for most (X)HTML selectors, and not only for mere <a> elements.
While this isn’t breaking news (Firefox and other browsers has supported this for years), this long-awaited feature now allows developers to create eye-catching effects on web pages without having to code a single piece of JavaScript, which is always an unknown, uncontrolled territory.
With more and more users upgrading to IE 7 and 8, the use of the “hover” pseudo-class with multiple (X)HTML elements is becoming a more common practice. It's no wonder, because it can produce impressive results with minor effort, and most importantly, on a great variety of browsers.
Given the importance of this topic, in the lines to come I’ll be demonstrating how to use the aforementioned pseudo-class in three different cases: first, for highlighting different containers of a web page; then for building pure CSS-based tooltips; and finally for building a neat drop-down menu, which you’ll be able to customize.
Does my proposal sound interesting enough for you? Then start reading now!
Next: Building a sample (X)HTML page >>
More Style Sheets Articles
More By Alejandro Gervasio
