I have an element show on mouseover now I would like to hide it once I mouse out. How do I do this?
<p>I am using this HTML:</p>

<pre><code>&lt;div class="menu"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" name="div1" &gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" name="div2" &gt;Page1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" name="div3" &gt;page2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#" name="div4" &gt;page3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div&gt;

    &lt;div class="div1" style="display:none"&gt;
        Test
    &lt;/div&gt;

    &lt;div class="div2" style="display:none"&gt;
        Test...
    &lt;/div&gt;

    &lt;div class="div3" style="display:none"&gt;
        Test 1
    &lt;/div&gt;

    &lt;div class="div4" style="display:none"&gt;
        Test 2
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Along with the following jQuery:</p>

<pre><code>$('a').mouseover

(function() {
    var divname = this.name;
    $("." + divname).show("slow");
});
</code></pre>

<p><a href="http://jsfiddle.net/puffnstuff/r739G/" rel="nofollow">JsFiddle</a></p>

<p>I want to be able to mouseout and hide once I leave the boxes that appear not on "a". How do I do this?</p>
