I have been using rollovers ever since I started working on the web. The first rollover was taught by David Cahill using JavaScript in Victoria University. I have not been able to find something better than that so far, till I started using CSS and lists for creating rollovers.

This is a list with links; this is how it would look if we use just the list without any CSS. It has links that work but it doesn't really look very good or does it.

To fix it lets add the following code in separate file and save it as a CSS. Now link the CSS file to your file of list. What we have done is given a style to the list and now the list does look much better than before. This code defines how the "A" or the link will look like.

OK so we have managed to create a list that looks good but the objective was to create rollover for the list items. We add the following bit of code. This code is actually an extension of the code we just wrote for the "A" element of the list. This code actually defines the rollover state of the link.

This gives us a fully functional list with rollovers.

Are we ready to go one more step from here? We can make it look even better. I have seen people doing what I have taught so far but what comes now is something I have not seen used so far. I tried it as an experiment and it worked well. We are now going to add an image to the rollovers as well. We create a single colour image. The colour we have used is actually the colour of the background in normal state. The image is always there but not visible as it is on the same colour background but when you rollover the link, the background colour is changed so the image is visible.

So here you are with rollovers created using lists and CSS. Pretty nifty. I guess it is time for me to add that all I have just explained here is something I learned by using the most important feature provided by Internet Explorer—View Source.

Download the files used in this tutorial