List item with mouseenter
<p>I want to create an effect where a user moves his mouse over an LI, a textarea inside of it will fadeIn, and when the user exists the LI the textarea will fadeOut. However, with the code I am attaching, it seems that once the user moves his mouse to the textarea, it fadesOut although it is part of the UL.</p>

<p>Demo is at <a href="http://jsbin.com/acaci3/4" rel="nofollow">http://jsbin.com/acaci3/4</a></p>

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

<pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;div&gt;Title&lt;/div&gt;
      &lt;div&gt;Caption&lt;/div&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div&gt;Title&lt;/div&gt;
      &lt;div&gt;Caption&lt;/div&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(function() {
  $("ul li").hover(
     function() {
        $("textarea" , $(this)).fadeIn();
     },
     function() {
        $("textarea" , $(this)).fadeOut();
     }
  );
});
​
</code></pre>

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

<pre><code>  ul {
    list-style: none;
  }
  li {
    float:left; 
    width:800px;
    background:#ccc;
  }
  li div {
    float:left;
    margin-right:30px;
    height:150px;
  }
  textarea {
    display:none;
    width: 100px;
    height: 30px;
    resize: none;
    border: 3px solid #cccccc;
    padding: 5px;
}
</code></pre>
