Jquery slideDown effect（）不会从页面的右侧开始_Jquery_Html_Css

Jquery slideDown effect（）不会从页面的右侧开始

jquery html css

Jquery slideDown effect（）不会从页面的右侧开始,jquery,html,css,Jquery,Html,Css,鼠标悬停上的左上角按钮沿带有示例说明的div向下滑动。问题是，在向下滑动时，描述似乎来自第二个按钮并与第一个按钮合并，而不仅仅来自第一个按钮。我怎样才能解决这个问题 index.html <!DOCTYPE html> <html> <head> <link href = "styles.css" type = "text/css" rel = "stylesheet" /> <script src =

鼠标悬停上的左上角按钮沿带有示例说明的div向下滑动。问题是，在向下滑动时，描述似乎来自第二个按钮并与第一个按钮合并，而不仅仅来自第一个按钮。我怎样才能解决这个问题

index.html

<!DOCTYPE html>
<html>
    <head>
        <link href = "styles.css" type = "text/css" rel = "stylesheet" />
        <script src = "jquery-2.0.1.js" type = "text/javascript"></script>
        <script src = "jquery-ui-1.10.3/jquery-ui-1.10.3/ui/jquery-ui.js" type = "text/javascript"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>


    <body>
        <div id = "header">
            <h1>Header</h1>
        </div>


        <div id = "buttons">
            <div class = "column_div">

                <div id = "button_div1" class = "button_div">
                    <img id = "text1" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>

                <div id = "button_div2" class = "button_div">
                    <img id = "text2" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>

            </div>


            <div class = "column_div">
                <div id = "button_div3" class = "button_div">
                    <img id = "text3" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>

                <div id = "button_div4" class = "button_div">
                    <img id = "text4" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>
            </div>


            <div class = "column_div">
                <div id = "button_div5" class = "button_div">
                    <img id = "text5" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>

                <div id = "button_div6" class = "button_div">

                    <img id = "text6" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" />
                </div>
            </div>

        </div>
    </body>
</html>

script.js

body
{
    background-color: black;
}


#header
{
    width: 100%;
    text-align: center;
}


h1
{
    color: white;
}


#buttons
{
    float: left;
    width: 100%;
}


.column_div
{
    float: left;
    width: 33%;
}


.button_div
{
    width: 280px;
    margin: 0 auto;
}


.button_pic
{
    width: 280px;
    height: 40px;
    margin: 0;
    border: 1px solid #DDD;
}


#descr
{
    background-color: white;
    width: 280px;
    height: 150px;
    margin: -5px auto 5px auto;
    border: 1px solid #DDD;
}


h3
{
    float: left;
    height:100px;
}

$(document).ready (function() {
    $(document).on ("mouseenter", "#text1", function() {
        $("#descr").remove();
        $("#button_div1").append ("<div id = 'descr'></div>");
        $("#descr")
            .hide()
            .append ("<h3>Sample description</h3>")
            .slideDown ("slow");
    });


    $(document).on ("mouseleave", "#text1", function() {
        $("#descr").slideUp ("slow", function() {
                $(this).remove();
        });
    });


    $(document).on ("mouseenter", "#descr", function() {
        $("#descr").slideUp ("slow", function() {
                $(this).remove();
        });
    });
});

$（文档）.ready（函数（）{
$（document）.on（“mouseenter”，“#text1”，function（）{
$（“#descr”）.remove（）；
$（“#按钮_div1”）。追加（“”）；
$（“描述”）
.hide（）
.append（“示例说明”）
.向下滑动（“缓慢”）；
});
$（document）.on（“mouseleave”，“#text1”，function（）{
$（“#descr”）.slideUp（“慢”，函数（）{
$（this.remove（）；
});
});
$（document）.on（“mouseenter”，“#descr”，function（））{
$（“#descr”）.slideUp（“慢”，函数（）{
$（this.remove（）；
});
});
});

演示：

删除

页边距：5px自动5px自动从#描述。
像这样
这个怎么样

问题是图像本身，它的显示
值是内联
，因此您将在底部看到额外的空间，因此只需将其更改为块
，并调整父分区的一些边距
。
但它不会从第一个按钮开始，它仅仅来自第二个垂直对齐：top和按钮的底部边距