jQuery image swap on nav hover
<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>
