onHover effect with textarea
<p>I am trying to  create an hover effect, so when a user moves his mouse over a button, a textarea will be displayed below the button where the user can insert text before submitting a form. If the user leaves the textarea after it was was opened, I would like it to be closed again.... The problem with the code I've used below is that once the user leaves the button area (in order to insert text in the textarea) the textarea disappears. Help would be appreciated!</p>

<p>I have used the following code (You can find the following example also at <a href="http://jsbin.com/ifiso3" rel="nofollow">jsbin</a> ):</p>

<p><strong>CSS</strong></p>

<pre><code>#send-container {
  position:relative;
}
#text-container {
  display:none;
  background-color:#FEF9F4;
  position: absolute;
  z-index: 1000;
  top:28px;
  left:0;
  padding:2px;
}

textarea {
  width: 150px;
  height: 50px;
  resize: none;
  border: 3px solid #cccccc;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}
</code></pre>

<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>

<p>Thanks!</p>

<p>Joel</p>
