在鼠标悬停上显示隐藏内容 - 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; 
}