与mouseenter的列表项目

Question

我想创建一个效果，其中用户将鼠标移动到LI上，其中的textarea将会淡入，并且当用户存在LI时，textarea将fadeOut。然而，随着我附加的代码，似乎一旦用户将他的鼠标移动到文本区域，它就会褪色，尽管它是UL的一部分。

演示是在http://jsbin.com/acaci3/4

HTML

<ul> 
    <li> 
     <div>Title</div> 
     <div>Caption</div> 
     <textarea></textarea> 
    </li> 
    <li> 
     <div>Title</div> 
     <div>Caption</div> 
     <textarea></textarea> 
    </li> 
    </ul> 

jQuery的

$(function() { 
    $("ul li").hover(
    function() { 
     $("textarea" , $(this)).fadeIn(); 
    }, 
    function() { 
     $("textarea" , $(this)).fadeOut(); 
    } 
); 
}); 
​ 

CSS

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

Answer 1

这是working example。

注意，它使用jQuery 1.4.3