Roll on over

I’ve just been playing around with CSS, and figured out a pretty neat way of creating remote rollover effects using just CSS. The basic idea is to have a link which, when hovered over, displays some text next to it as a description. This has been done by many people many times using JavaScript, but I wanted to see if it was possible using only the power of Cascading Style Sheets. Although it doesn’t work in Internet Explorer (no surprise there), in CSS-compatible web browsers the result is very effective and blindingly easy to customise. Here is an example of it in action.

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!

2 thoughts on “Roll on over

  1. Very nice, Matthew 🙂 For the time being I’ll use JavaScript, but once IE gets properly sorted with CSS that will be a lot cleaner.

Leave a Reply

Your email address will not be published. Required fields are marked *