CSS based banner image swap triggered by text mouseover

Question

I'm looking to replace an image background on a banner above my navigation bar with a specific image for each menu item when the user rolls over the menu text. I want it so that each menu item causes the banner to swap the background for an image related to the text of each menu item, and only use CSS.. not javascript. This seems like the closest thing I could find through some googling, but as you can see, its a bit different from what I'm looking for:

<div class="nav">
<a href="#">
<[i.m.g] src="logo[dot]gif" width="187" height="136" alt="" />
</a>
</div>

And the CSS to go along with it:

div.nav {
height: 187px;
width: 136px;
margin:0;
padding:0;
background-image:u.r.l("logo-red[dot]gif");
}

div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

div.nav i.m.g {
width:100%;
height:100%;
border:0;
}

div.nav a:hover i.m.g {
visibility:hidden;
}