Here’s an eff ect that can go all the way to driving pop-up menus, if you get fancy enough (see
the next section for details). At the simpler end, you can use this eff ect to make information
appear on mouseover and go away on mouseout without ever having to write a lick of
JavaScript.
Suppose you want a little bit of explanatory text to show up for each link in your sidebar, but
you don’t want to entrust it to tooltips, which are inconsistently presented across browsers and
anyway can’t (yet) be styled. You’d set up the markup something like this:
<ul class="toc">
<li><a href="1.html">Chapter 1 <i>In which a dragon is seen</i></a></li>
<li><a href="2.html">Chapter 2 <i>In which a knight is summoned</i></a></li>
<li><a href="3.html">Chapter 3 <i>In which a princess is disappointed</i></a></
li>
</ul>
Wait a minute, i? Isn’t that presentational? Well, yes, and so is what you’re doing. You could
just as easily use span, but i is a shorter element name and besides, that way if the CSS
somehow fails to be applied, the text will very likely be italicized. Th at’s an acceptable fallback,
in my opinion.
ul.toc li {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 0; left: 100%;
margin: -1em 0 0 1em; padding: 1em;
background: #CDE; border: 1px solid gray;}
Ta-da! Little pop-ups. Th ey’re positioned with respect to their containing li elements
because of the position: relative in the fi rst line of CSS shown. If you wanted to place
them with respect to the whole set of links, you’d just shift the relative positioning to the ul
itself and adjust placement of the pop-ups accordingly. For example, you could put them
underneath the last of the links in the list
ul.toc {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 100%; right: 0;
margin: 1em 0 0; padding: 1em;
background: #CDE; border: 1px solid gray;}
