Question

悬停时左上角的按钮向下滑动带有样本描述的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>

styles.css的

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;
}

的script.js

$(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();
        });
    });
});

演示：Fiddle

Answer 1

从#descr删除margin: 5px auto 5px auto;。像这样jsfiddle

Answer 2

这个怎么样

jsFiddle

问题在于图片本身，其display值为inline，因此您会在底部看到额外的空间，因此只需将其更改为block并调整一些{{1}父div。

slideDown效果（）不会在页面的正确位置开始

2 个答案: