jQuery Popup / Popout

时间：2009-11-20 07:19:13

标签： jquery css

我连续有11个图像，如果鼠标悬停在其中一个上，我想要弹出一个弹出窗口。所以每11个图像都有不同的弹出窗口。我已经有了一些代码来执行此操作，但它只适用于第一张图像。

代码： 的的index.html 

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1">
        <a id="slice1">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice2">
        <a id="slice2">Slice 2</a>
        <em style="top: -70px; display: none;">------</em>
</div>
<div class="slice3">
        <a id="slice3">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice4">
        <a id="slice4">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice5">
        <a id="slice5">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice6">
        <a id="slice6">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice7">
        <a id="slice7">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice8">
        <a id="slice8">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice9">
        <a id="slice9">RSS Feed</a>
        <em style="top: -70px; display: none;">---</em>
</div>
<div class="slice10">
        <a id="slice10">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice11">
        <a id="slice11">RSS Feed</a>
        <em style="top: -70px; display: none;">-----</em>
</div>
</span>

style.css （此处相同的代码已被复制11次，每个弹出窗口/图像一次）

* { margin: 0; padding: 0; border: 0; }

.slice1 {
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 0;
    width: 700px;
    position: relative;
}

div.slice1 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 700px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice2 {
    float: left;
    margin: 0px auto;
    padding: 0;
    width: 130px;
    position: relative;
}

div.slice2 em {
    font-size: 47px;
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 100px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    z-index: 0;
    display: none;
}.

slice3 {
    margin: 0px auto;
    padding: 0;
    width: 220px;
    position: relative;
}

div.slice3 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 220px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice4 {
    margin: 0px auto;
    padding: 0;
    width: 70px;
    position: relative;
}

div.slice4 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 70px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice5 {
    margin: 0px auto;
    padding: 0;
    width: 250px;
    position: relative;
}

div.slice5 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 250px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice6 {
    margin: 0px auto;
    padding: 0;
    width: 380px;
    position: relative;
}

div.slice6 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 380px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice7 {
    margin: 0px auto;
    padding: 0;
    width: 170px;
    position: relative;
}

div.slice7 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 170px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice8 {
    margin: 0px auto;
    padding: 0;
    width: 30px;
    position: relative;
}

div.slice8 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 30px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice9 {
    margin: 0px auto;
    padding: 0;
    width: 110px;
    position: relative;
}

div.slice9 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 110px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice10 {
    margin: 0px auto;
    padding: 0;
    width: 330px;
    position: relative;
}

div.slice10 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 330px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}

slice11 {
    margin: 0px auto;
    padding: 0;
    width: 110px;
    position: relative;
}

div.slice11 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 110px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

#rss-icon {
    width: 42px;
    height: 42px;
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/icon.png) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice1 {
    width: 700px;
    height: 42px;
    background: url(http://www.kttns.org/yta2) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice2 {
    width: 130px;
    height: 42px;
    background: url(http://www.kttns.org/wexm) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice3 {
    width: 220px;
    height: 42px;
    background: url(http://www.kttns.org/imthi) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice4 {
    width: 70px;
    height: 42px;
    background: url(http://www.kttns.org/wqxnj) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice5 {
    width: 250px;
    height: 42px;
    background: url(http://www.kttns.org/njqxz) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice6 {
    width: 380px;
    height: 42px;
    background: url(http://www.kttns.org/mwi2y) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice7 {
    width: 170px;
    height: 42px;
    background: url(http://www.kttns.org/zlzgm) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice8 {
    width: 30px;
    height: 42px;
    background: url(http://www.kttns.org/djjn) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice9 {
    width: 210px;
    height: 42px;
    background: url(http://www.kttns.org/mmdq) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice10 {
    width: 330px;
    height: 42px;
    background: url(http://www.kttns.org/kodc4) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice11 {
    width: 110px;
    height: 42px;
    background: url(http://www.kttns.org/hyz) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

tooltop.js （使弹出窗口弹出的代码，每个弹出窗口/图像一次）

$(document).ready(function(){

    $(".slice1 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice2 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice3 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice4 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice5 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice6 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice7 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice8 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice9 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice10 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice11 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

为什么弹出窗口仅出现在第一张图片上？

1 个答案:

答案 0 :(得分：4)

我一直在做这些测试。虽然我没有得到正确的时间轴结构（可能是因为我缺少显示时间轴的上下文的CSS），但我得到了弹出窗口以显示添加此CSS声明：

div {position: relative;}

否则，position: absolute的{​​{1}}声明将整个页面（或最接近的相对定位元素）作为参考，从而将弹出窗口设置为屏幕外（因为-60垂直位置） ）。

相关问题
最新问题