In a nutshell, this is all achieved by placing an absolutely positioned div container within a link. Then, in the style sheet, you can tell it to display: none; in the link’s normal state, and only show the div when the link is being hovered over. Take a look at the code if you can and you’ll see just how simple it all is. And because we’ve used a div container inline, it’s really easy to customise to suit the content too – I’ve changed the colour of one of the rollover backgrounds and added a picture on another. This could be a really useful tool for a web site where you want a short description of the link so people know what it is before the click it.
My next challenge will be to find an excuse to use it somewhere… The only trouble there is that it’s still not IE-compatible, so it probably won’t make it out into any public web sites any time soon. At least not until Microsoft get their act together and give us a decent browser, but that’s a rant for another time!