jQuery: slider 中使用的工具提示的位置

Question

我正在使用 jQuery Tooltip和一个 jQuery Slider (jQueryUI)同时。 slider 工作正常。但滚动后工具提示显示在错误的位置(下载 screenshot 或 source )。我猜这是因为错误的 CSS ...

为什么有些工具提示没有显示在正确的位置？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
    body { margin:0; padding:0;}

    #sliderContent { 
        width:955px; 
        height: 300px;
        background-color:#f00; 
        overflow: hidden;
    }
    .viewer { 
        width:955px; 
        height:300; 
        overflow:hidden;
        background: #ff0;
        position:relative; 
    }
    .content-conveyor { 
        width:955px; 
        height:300px; 
        background: #0ff;
        position:relative; 
        overflow: hidden;
    }
    .teamitem { 
        width:304px;
        height: 300px;
        float:left;
        font-family:Tahoma; 
        text-align:center; 
    }
    #sliderwrap {
        position: relative;
        top: -50px;
        left: 400px;
        width: 150px;
        padding: 5px 30px;
        z-index: 99999;
        background: url(fileadmin/media/_statics/slider-bg.png);
    }
    #slider {
        /*nothing here*/
    }
    .ui-slider .ui-slider-handle {
        /* see jQuery-UI-CSS */ 
    }

    /*///////////////////////////*/
    /*///////////////////////////*/
    ul.team {
        display: block;
        overflow: hidden;
        height: 300px;
        /* max width here, for users without javascript */  
        width: 15000px; 
        /* removing default styling */
        margin: 0;
        padding: 0;
        background: url(fileadmin/media/_statics/teamnavigation-bg.jpg) left top repeat-x;      
        list-style: none;
    }
    .team li {
        margin-right: 10px;
        display: block;
        float: left;
        padding: 0;
        width: 155px;
        height: 300px;
    }
    .team a {
        display: block;
        text-decoration: none;
    }
    .team span {
        display: none;
        margin-top: 3px;
        text-align: center;
        font-size: 12px;    
        color: #fff;
    }
    .team a:hover span {
        display: block;
    }

    .team img {
        border: 0;
    }
    .normal {
        position: relative;
        z-index: 10;
        cursor: pointer;
    }
    .action { 
        position: relative;
        z-index: 8;
        top: -300px;
    }
    /*///////////////////////////*/
    /*///////////////////////////*/
    .tooltip {
        postition: absolute;
        float: left;
        display:none;
        background: url('fileadmin/media/_statics/tooltip.png') no-repeat;
        width:175px; 
        height:80px;
        font-size:11px;
        color:#fff;
        z-index: 999999;
    }
        .name { 
            font-size: 13px;
            font-weight: bold;
            color: #efefef;
            letter-spacing: 0.01em;
            margin-top: 10px;
        }
        .function { 
            font-size: 9px;
            color: #b8b8b8;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-top: 3px;
        }
</style>

<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css">

<script>
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
    $(document).ready(function() {

        ////////////////////////////////////////////////////////////////
        // CHANGE IMAGES
        ////////////////////////////////////////////////////////////////
        $(".team li img.action").css("opacity", 0);


        $(".team li img.normal").mouseover(function ()
        {
            $(this).animate({opacity: 0}, 200);
            $(this).next().next().animate({opacity: 1}, 200);
        });
        $(".team li img.normal").mouseout(function ()
        {
            $(this).animate({opacity: 1}, 200);
            $(this).next().next().animate({opacity: 0}, 200);
        });



        ////////////////////////////////////////////////////////////////
        // TOOLTIP
        ////////////////////////////////////////////////////////////////
        $(".team li img.normal").tooltip({ 
            effect: 'fade',
            offset: [85, 20]
        }); 



        ////////////////////////////////////////////////////////////////
        // SLIDER
        ////////////////////////////////////////////////////////////////
        //vars
        var conveyor = $(".content-conveyor", $("#sliderContent")),
        teamitem = $(".teamitem", $("#sliderContent"));

        //set length of conveyor
        conveyor.css("width", teamitem.length * parseInt(teamitem.css("width")));

        //config
        var sliderOpts = {
            max: (teamitem.length * parseInt(teamitem.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
            animate: false,
            slide: function(e, ui) { 
            conveyor.css("left", "-" + ui.value + "px");
            }
        };

        //create slider
        $("#slider").slider(sliderOpts);


    }); 
</script>



<div id="sliderContent">
    <div class="viewer">
        <div class="content-conveyor">
            <ul class="team">
                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/0.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/0-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

                <li class="teamitem">
                    <img src="fileadmin/media/team/1.png" class="normal" alt="Johannes Scherg, Mediendesigner" title="" />
                    <div class="tooltip">
                        <div class="name">Johannes Scherg</div>
                        <div class="function">Mediendesigner</div>
                    </div>
                    <img src="fileadmin/media/team/1-hover.png" class="action" alt="Johannes Scherg, Mediendesigner" title="" />
                </li>

            </ul>
        </div>
    </div>
    <div id="sliderwrap">
        <div id="slider"></div>
    </div>
</div>

Answer 1

我确定这是否是您想要的，但是如果您想在每个列表项中的相同位置显示每个工具提示，您可以尝试将position:relative应用于所有列表节点:

.team li {
    display: block;
    float: left;
    height: 300px;
    margin-right: 10px;
    padding: 0;
    width: 155px;
    position:relative; //added code
}