與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