CSS Image Mouseover with <li>

As I said before I’m doing a lot more CSS these days with tableless design.  Now before I start on this post, none of this is new or complex.  But you know it’s amazing that nobody talks about hover much working on elements other than just a hyperlink at least from what I see on the net overall.

Goal: I had an existing suckerfish menu.  My top level nav items in the menu (what you mouse over) are images in my case, not just CSS boxes.  So I need a mouseover that switches images when I mouse over my suckerfish menu image tabs.

So big deal right?  Back to hover. You know hover of course, everyone does?  yea, a:hover, etc.  Well, it can be used on other elements and honestly I never really had wonder about this fact until I had a menu based solely on unordered lists where the top nav tabs did not need to be clickable..hence for example a suckerfish menu.

This is not a suckerfish menu per say below (that was just the scenario I had today at work) but for the example here just 3 top level menu tabs that when you mouse over, I simply want to change out the image during rollover to show a bit of highlight with the rollover image. 

Well it’s very simple after you figure out how to do it with CSS, here it goes:

<style type="text/css">

    #TopNavWrapper

    {

        margin: 0px auto;

    }

    #TopNavWrapper li

    {

        list-style: none;

    }

    #topnav_1

    {

        background: url(/content/images/navImage1.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float:left;

    }

    #topnav_2

    {

        background: url(/content/images/navImage1.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float: left;

    }

    #topnav_3

    {

        background: url(/content/images/navImage1.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float:left;

    }

    /* hover effect */

    #TopNavWrapper #nav #topnav_1:hover

    {

        background: url(/content/images/navImage1a.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float:left;

    }

    #TopNavWrapper #nav #topnav_2:hover

    {

        background: url(/content/images/navImage1a.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float: left;

    }

    #TopNavWrapper #nav #topnav_3:hover

    {

        background: url(/content/images/navImage1a.jpg) no-repeat;

        width: 204px;

        height: 40px;

        float:left;

    }

</style>

<div id="TopNavWrapper">

    <ul id="nav">

        <li id="topnav_1"></li>

        <li id="topnav_2"></li>

        <li id="topnav_3"></li>

    </ul>

</div>

I don’t have this example running in this post.   Here is the code (.asp page + images).  I supposed I should have put it into just an .htm but oh well…