How To Do It: Instead of “swapping” out the original image and the image you see when you hover over, we’re going to make the original image go away. Think of this as a disappearing act.
First, I’ll show you what my horizontal list looks like:
So there I have inserted the images (normal state) into the <li> tags of my menu list. Next we’re going to add some CSS styles.
In my case, I want a horizontal list that does not have bullets, so I will need to make the <li> tags display inline, else it will give me a vertical list and style the list style type with none. Make sure you add the display block style to the li’s a element. If you don’t do that, the images will flicker when you hover over them. Try it with and without that style and you’ll see what I mean.
You’re going to have different images for each menu item so you’ll have to give each item a separate class. Then in the CSS, you’ll give each of those classes a different background image to use which serves as the hover image.
Also, you’ll need to style the a element (with the image) when it’s being hovered over. When you hover over the item, you want to give it the effect of swapping/changing. What we’ll do here is add a visibility styling (hidden). That way, when you hover over the <li> (that already has a background image) it will hide the normal state image and display the hover image (background image).
Here’s my menu when you hover over “Home”:
The CSS looks like this:
Note: This method is not compatible with IE6 as it does not support attribute selectors (a:hover) nor context-dependent styles (a:hover img). To hell with IE6.