title: jQuery image swap on nav hover
body: <p>I'm trying to use jQuery to do an image swap on the navigation when a user hovers over a menu item. It needs to load a different image depending on the height of the element.</p>
  
  <p>So far I have this, which works to some extent:</p>
  
  <pre><code>$(document).ready(function() {
      $('a.mainlevel').hover(function() {
          if ($(this).height() &gt; 15) {
              $('a.mainlevel').mouseenter(function() {
                  $('a.mainlevel:hover').css('background-image','url(/images/menuHoverBig.gif)');
              });
              $('a.mainlevel').mouseleave(function() {
                  $('a.mainlevel').css('background','#505051');
              });
          }
          else {
              $('a.mainlevel').mouseenter(function() {
                  $('a.mainlevel:hover').css('background-image','url(/images/menuHover.gif)');
              });
              $('a.mainlevel').mouseleave(function() {
                  $('a.mainlevel').css('background','#505051');
              });
          }
      });
  });
  </code></pre>
  
  <p>The problem I'm having is that if I hover over element of size X, it loads the correct image but then when I hover over element of size Y, it loads the image for X. If you then hover over Y again it works correctly. Going back to X, the Y image loads until a second hover.</p>
  
  <p>I'm not really that up on jQuery so it's probably something obvious, but I can't work it out.</p>
  
  <p>Cheers </p>