jquery - 滑块 div 位置与另一个 div 重叠

Question

我想用另一个 div 在悬停时滑动带有一些文本的 div，现在当我将鼠标悬停在第一个 div 区域时需要重复三到四次，滑块 div 就在正确的位置，但是如果我将鼠标悬停在第二个 div 上，滑块 div 位于相同的位置...

如果有人可以解决这个问题，我真的很感激......

这是演示
，这里是 Jquery 代码：-

$(document).ready(function () {
        $("#dvPanel1").hover(function () {
            $("#downPanel1").stop(false, true).slideDown(100);
        });
        $("#dvPanel1").mouseleave(function () {
            $("#downPanel1").stop(false, true).slideUp(100);
        });
    });
    $(document).ready(function () {
        $("#dvPanel2").hover(function (event) {
            $("#downPane2").stop(false, true).slideDown(300);

        });
        $("#dvPanel2").mouseleave(function (event) {
            $("#downPane2").stop(false, true).slideUp(300);

        });
    });

Answer 1

这是我的修改版本可能对你有帮助

http://jsfiddle.net/vonDy2791/9TAYn/4/

#downPane2 {
    display:none;
    float:left;
    width:765px;
    position:absolute;
    background-color: Aqua;
    top:360px;
    height:175px;
    margin-left:0px;
    z-index:100
}

Answer 2

请在第二个面板的顶部添加边距，如下所示

 <div id="downPane2" style="margin-top:189px;">

让我知道我是否可以为您提供更多帮助。

Answer 3

您需要制作 '#downPanel..' position:relative，而不是 'absolute'。然后设置top:0px，以便在图像下方显示（0px相对于面板上方的图像）。

http://jsfiddle.net/skelly/9TAYn/3/

我还更新了小提琴，这样你就没有多重了$(document).onReady(..