0

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

1 回答 1

1

It's not a jQuery, but a CSS issue. You have to position your tooltip relatively to its parent - DEMO

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

#ltabs ul li a span {
    position: absolute;
    left: 80px;
    top: 30px;
    z-index: 999;
}
于 2012-08-26T13:58:40.680 回答