title: CSS based banner image swap triggered by text mouseover
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I only want to use CSS... Not JavaScript.</p>
  
  <p>This seems like the closest thing I could find through some googling, but as you can see, it's a bit different from what I'm looking for:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
      &lt;a href="#"&gt;
          &lt;img src="logo.gif" width="187" height="136" alt="" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS to go along with it:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.nav {
      height: 187px;
      width: 136px;
      margin: 0;
      padding: 0;
      background-image: url("logo-red.gif");
  }
  
  div.nav a, div.nav a:link, div.nav a:visited {
      display: block;
  }
  
  div.nav img {
      width: 100%;
      height: 100%;
      border: 0;
  }
  
  div.nav a:hover img {
      visibility: hidden;
  }
  </code></pre>