Write Hype is the personal weblog of web designer/developer Josh Minnich, featuring articles about life, events, and happenings.

CSS Rollovers

There are plenty of articles out there on the interwebs about CSS rollovers, but I still have yet to come across one that I think is simple and easy to understand. My goal is to explain bad habits, and show you an easy, and simple way to make CSS rollovers for any occasion!

First things first…
The most important rule, and possibly the only rule about CSS rollovers, is that you never want to use them on any other element than the <a> or link tag. The reason being: You want your rollover to work in every browser. So using them on <div>’s or other elements in not going to give you the result you want across the board.

Let’s get started!
For my tutorial, I’m going to show you how to make a simple vertical navigation with CSS rollovers. So first things first, let’s build our HTML that we want to make pretty with our CSS!

<div class="navigation">
    <h1>Site Navigation</h1>
    <ul class="sitenav">
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>
</div>

Now that we have some HTML made up, lets add some CSS to it!

<style type="text/css" media="screen">
    /* Setting some basics */
    html { font-size:125%; }
    body {
        font-family:Helvetica,Arial,sans-serif;
        font-size:50%;
        margin:1em;
        text-align:left;
    }
    ul {
        margin:0 0 0;
        padding:0 0 0;
    }
    li {
        list-style:none;
        margin:0 0 0;
        padding:0 0 0;
    }
    /* Demo Styles */
    h1 {
        line-height:1.2em;
        margin:0 0 .5em;
    }
    div.navigation {
        overflow:hidden;
        width:100%;
    }
    ul.sitenav li {
        font-size:1.2em;
        line-height:1.5em;
    }
    ul.sitenav li a {
        background:#09C;
        color:#FFF;
        display:block;
        font-weight:bold;
        margin:0 0 2px;
        padding:1em;
        text-decoration:none;
        width:20em;
    }
    ul.sitenav li a:hover { background:#FFA500; }
</style>

If everything worked out well, you should get something that looks like this. That’s really all there is to it! Basically all we are doing is letting the list hold its normal styles, and selecting the links to put the rollovers styles on. This way we’re not going to get any funny looking errors in other browsers. If we put the styles on the <li> itself, it would be much more tricky due to browsers rendering lists slightly different than each other. If you need to put any styles on the <li> try not to make it too fancy.

What about image rollovers?
If you understand this tutorial pretty well, and you want to start using images you make in your preferred image editing program. Simply use the background of the link styles to switch out the background on rollover. And don’t forget to make the links the right size in height, and width to your images. You’ll notice in the HTML markup, you can select certain links because we put classes on each <li>. So if you wanted to have different image for each, thats no problem!