Display only the current item div with jQuery
<p>My jQuery:</p>

<pre><code>$(document).ready(function() {
    $('li').hover(function () {
        $(this).children('div:first-child').show();
    }, function () {
            $( this ).find('div').hide();
    });
});
</code></pre>

<p>My HTML:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2 &lt;div class="action hide"&gt;New | Delete&lt;/div&gt;
        &lt;ul&gt;
            &lt;li&gt;Item 2.1&lt;/li&gt;
            &lt;li&gt;Item 2.1 &lt;div class="action hide"&gt;New | Delete&lt;/div&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;   

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

<p>When I move the mouse in Section 2.1 it is also showing the <code>&lt;div class="action hide"&gt; New | Delete &lt;/ div&gt;</code> Item 2, and I do not want to show, how do I?</p>

<p>Thanks!</p>
