-2

ホバーの左上ボタンは、サンプルの説明とともに div を下にスライドします。問題は、下にスライドすると、最初のボタンからだけでなく、2 番目のボタンから説明が表示され、最初のボタンとマージされるように見えることです。どうすれば解決できますか？

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>

スタイル.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();
        });
    });
});

デモ:フィドル

4

2 に答える 2

2

これはどう

jsフィドル

問題は画像自体です。そのdisplay値はinline、下部に余分なスペースが表示されるため、これを変更して、親 div のblock一部を調整するだけです。margin

于 2013-06-25T07:34:39.720 に答える
2

margin: 5px auto 5px auto;#descr から削除します。このjsfiddleのように

于 2013-06-25T06:53:07.947 に答える