마우스 오버시 숨겨진 내용 표시 - JQuery

Question

도와주세요. 저는 JQuery를 처음 접했습니다.

저는 작업중인 탭 탐색을 위해 jquery 툴팁을 채택했습니다.

탭을 가져갈 때 부동 범위 (툴팁)가 표시된다는 전제가 있습니다. 호버가 성공했습니다. 하지만 콘텐츠가 포함 된 div는 표시되지 않고 첫 번째 콘텐츠 div에 계속 붙어 있습니다.

미리 조언 해 주셔서 감사합니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.tabcont div:not(:first)').hide(); 

    $('#ltabs ul li a').append('<span></span>'); 
    $('#ltabs ul li a').hover(
     function(){ 
      $(this).find('span').animate({opacity:'show', top: '-2'}, 'fast'); 
      var hoverTexts = $(this).attr('name'); 
      $(this).find('span').text(hoverTexts); 
     }, 
     function(){ 
      $(this).find('span').animate({opacity:'hide', top: '-2'}, 'fast'); 
     }); 
     return false; 
    }); 
</script> 

<div id="ltabs"> 
        <ul> 
         <li class="tab"><a href="#content1" name="Tab1" class="active"><h1>Tab1</h1></a></li> 
         <li class="tab"><a href="#content2" name="Tab2"><h1>Tab2</h1></a></li> 
         <li class="tab"><a href="#content3" name="Tab3"><h1>Tab3</h1></a></li> 
        </ul> 
        <div class="tabcont"> 
        <div id="content1"> 
        <!--LContent1--> 
         <h2>Title</h2> 
         <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
         <h2>Title</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
        </div> 
        <div id="content2"> 
        <!--LContent2--> 
         <h2>Title</h2> 
         <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
         <h2>Title</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
        </div> 
        <div id="content3"> 
        <!--LContent3--> 
         <h2>Title</h2> 
         <p> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
         <h2>Title</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel quam augue, vel rhoncus arcu</p> 
        </div> 
        </div>  
      </div> 

Answer 1

이것은 jQuery가 아니라 CSS 문제입니다. 툴팁을 부모에게 상대적으로 위치시켜야합니다. - DEMO

#ltabs ul li a { 
    display: block; 
    position: relative; 
} 

#ltabs ul li a span { 
    position: absolute; 
    left: 80px; 
    top: 30px; 
    z-index: 999; 
}