title: Mouseover/hover event for navigation bar link
body: <p>I have a Navigation bar set up with images for the links to other pages of the website. I am trying to get a mouseover or hover effect for the links in the  list. Basically, I have a different image for each button that I want to appear when the user rolls the mouseover to click on the link. (If jquery or java is needed that is fine!) The HTML is:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="container"  style="images/logo.png"&gt;
   &lt;p id="logo"&gt;&lt;img class="project14"src="images/NavBar-01.png"&gt;&lt;/a&gt;&lt;/p&gt;
  
      &lt;ul id="nav"&gt;
          &lt;li id=&gt;&lt;a href="work.html"&gt;&lt;img src="images/NavBar-02.png"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&gt;&lt;a href="about.html"&gt;&lt;img src="images/NavBar-03.png"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&gt;&lt;a href="resume.html"&gt;&lt;img src="images/NavBar-04.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS that I have is:</p>
  
  <pre><code>ul#nav {
      width: 956px; list-style: none; overflow: hidden; margin: -117px 0 60px 0;
  }
  
  ul#nav li {
      width: 145px; height: 109px; float: right;
      }
  </code></pre>
  
  <p>Help is much appreciated!</p>