You are now looking at the selected link. It’s no longer unvisited. To restart
the process, make some change to the code in the .htm file, such as adding a
<p>. Then resave the .htm file, and reload it into IE. This forces IE to treat this
as a new page and reset the behaviors of the pseudo-classes for a.
Hovering with pseudo-classes .........................................................
You should feel free to experiment by using these pseudo-classes with ele-
ments other than the ait was originally designed for. In general, CSS wisely
tries to allow you to use most of its features with most HTML elements. Why
restrict designers with artificial limitations? Why not let them fool around
with the various features and discover new ways to exploit CSS?
Hoveringis a particularly interesting feature because in its own cheap way it
mimics scripting. (I describe it as cheapbecause you don’t have to do any
programming to get a Web page to react to the user’s mouse.) The user
hovers the mouse pointer above something with a hoverpseudo-class, and
whammo, something happens to the style. At least, that’s the theory.
In practice, however, IE doesn’t permit hoverto be used with any element
other than the a, and even the usually generous Mozilla Firefox doesn’t seem
(in my experiments anyway) to allow all elements to respond to hovering.
You can imagine how this might be useful. With hover, you can achieve a
highlighting effect via CSS, rather than the more complex methods of DHTML
and scripting. Try viewing this example with Firefox or a browser that supports
using the hoverpseudo-class for elements other than the a(as I pointed
out earlier, IE 6 does not support this feature). Here all paragraphs use the
pseudo-class hover:
p:hover {background: peachpuff; border: 1px solid powderblue}
Load this into Firefox and see the interesting effect when you move your
mouse pointer over the paragraphs in the browser — try different elements
to see which are affected. In theory, they all should be.
You can find loads of examples on the Web showing how to create a hover
effect in IE using JavaScript.
Adding your own class name to a pseudo-class ............................
If you want, you can add a personal class name to a pseudo-class. For exam-
ple, if you want some of your links to turn pink when the user’s mouse hovers
272 Part IV: Advanced CSS Techniques
