Hover effect with button and textarea
<p>(I've posted a similar question before but now it is more targeted..)</p>

<p>I am trying to create a special hover effect with jQuery. I have a submit button - when a user moves his mouse over it I want a <code>textarea</code> element to open below the button. The user can then move his mouse into the <code>textarea</code> and type something... When he finishes he can move his mouse back to the submit button and submit the form. If the user moves his mouse outside of the <code>button</code>+<code>textarea</code> then the <code>textarea</code> should disappear. </p>

<p>The effect is basically identical to a navigation menu when a user places his mouse over a menu item, a list of related items opens below the item and the user can then choose from them. If he leaves the area, the related items list closes.</p>

<p>You can find a test I've made with no success at <a href="http://jsbin.com/ifiso3" rel="nofollow">jsbin</a> (the <code>textarea</code> disappears whenever the user tries to reach it)</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="send-container"&gt;
    &lt;input type="button" value="Button"&gt;
    &lt;div id="text-container"&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>JS (jQuery)</strong></p>

<pre><code>$("#send-container").live("mouseenter",
            function() {
                $("#text-container" , $(this)).show();
            });
      $("#send-container").live("mouseleave",
            function() {
              $("#text-container" , $(this)).hide();
            }
       );
</code></pre>
