-2

悬停时左上角的按钮向下滑动一个带有示例描述的 div。问题在于，向下滑动时，描述似乎来自第二个按钮并与第一个按钮合并，而不仅仅是来自第一个按钮。我该如何解决？

索引.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>

样式.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;
}

脚本.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();
        });
    });
});

演示：小提琴

4

2 回答 2

2

这个怎么样

jsFiddle

问题是图像本身，它的display值是inline这样你会在底部看到额外的空间，所以只需将其更改为block并调整一些margin父 div。

于 2013-06-25T07:34:39.720 回答
2

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

于 2013-06-25T06:53:07.947 回答