滑块div位置重叠在另一个div上

Question

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

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

以下是demo
这是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

你需要制作＆＃39; #downPanel ..＆＃39; position:relative，而不是绝对的＆＃39;。然后设置顶部：0px，使图像下方的显示（0px相对于面板上方的图像）。

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

我还更新了小提琴，以便你不会有多个$(document).onReady(..