在鼠标上方显示隐藏内容-JQuery

请帮忙。我对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>

$（文档）.ready（函数（）{
$（'.tabcont div:not（：first'）.hide（）；
$（'ltabs ul li a'）。附加（''）；
$（'ltabs ul li a'）。悬停(
函数（）{
$（this.find（'span'）.animate（{opacity:'show'，top:'-2'}，'fast'）；
var hoverTexts=$（this.attr（'name'）；
$（this.find（'span'）.text（hoverTexts）；
},
函数（）{
$（this.find（'span'）.animate（{opacity:'hide'，top:'-2'}，'fast'）；
});
返回false；
});





标题
1洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献身者。奥古斯广场，阿尔库广场

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯广场，阿尔库广场

标题
2洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的献身者。奥古斯广场，阿尔库广场

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯广场，阿尔库广场

标题
3洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的献身者。奥古斯广场，阿尔库广场

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯广场，阿尔库广场

这不是jQuery，而是CSS问题。您必须将工具提示相对于其父项进行定位-

#ltabs ul li a{
显示：块；
位置：相对位置；
}
#利阿斯潘酒店{
位置：绝对位置；
左：80px；
顶部：30px；
z指数：999；
}

感谢您的快速帮助，佐尔坦。事实上，我现在在更改内容区域时遇到了问题。您知道解决方法吗？或者您可能希望再次查看jQuery UI选项卡。我会检查这些，让你知道事情的结果。