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;
}

在鼠标悬停上显示隐藏的内容 - JQuery

1 个答案: