마우스 항목이있는 항목 목록

Question

사용자가 LI 위에 마우스를 올려 놓으면 그 안에있는 텍스트 영역이 페이드 인되며, 사용자가 LI에 있으면 텍스트 영역이 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

,536,

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입니다. 그것이 내가 오페라, 파이어 폭스, IE와 크롬에서 데모를 볼 수있어 그것은 크롬을 제외하고 잘 작동하고 JQuery와 1.4.3