How do I edit the below jQuery to return the hover logo change to original state?
<p>first post here. My code is below. What I have here is basically a navigation menu (#nav), and a logo (#logo). When hovering over the #nav elements, I've used data-href and an image link to swap the #logo image when hovering over different navigation items. For instance hover over 'Blue' the logo goes to the blue image. Upon hovering OFF though, the code below just sticks at the last image viewed. Is there a way to return it to the original state when hovering off?</p>

<p>HTML:</p>

<pre><code>&lt;ul id="nav"&gt;
    &lt;li data-href="&lt;?php bloginfo('template_url'); ?&gt;/images/logo-marketing.png" class="nav1"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/marketing"&gt;Marketing&lt;/a&gt;&lt;/li&gt;
    &lt;li data-href="&lt;?php bloginfo('template_url'); ?&gt;/images/logo-consultancy.png" class="nav2"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/consultancy"&gt;Consultancy&lt;/a&gt;&lt;/li&gt;
    &lt;li data-href="&lt;?php bloginfo('template_url'); ?&gt;/images/logo-project-management.png" class="nav3"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/project-management"&gt;Project Management&lt;/a&gt;&lt;/li&gt;
    &lt;li data-href="&lt;?php bloginfo('template_url'); ?&gt;/images/logo-production-engineering.png" class="nav4"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/production-engineering"&gt;Production &amp; Engineering&lt;/a&gt;&lt;/li&gt;
    &lt;li data-href="&lt;?php bloginfo('template_url'); ?&gt;/images/logo-innovation.png" class="nav5"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/innovation"&gt;Innovation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$(window).load(function(){
var nav = $('#nav')[0];
var output = $('#logo')[0];

$(nav).on('hover', 'li', function() {
    $(this).stop().addClass('selected').siblings().removeClass('selected');
    var url = $(this).stop().data('href');
    $(logo).html('&lt;img src="' + url + '"&gt;');
});
});
</code></pre>
