0

ホバーの左上ボタンは、サンプルの説明とともに div を下にスライドします。解決できない問題が 2 つあります。

  1. 説明は 2 番目のボタンと結合する必要がありますが、最初のボタンと結合します。
  2. ボタンや説明などの間の距離を制御できません。

前もって感謝します。

index.html

<!DOCTYPE html>
<html>
    <head>
        <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 style = "background-color: black">

        <div id = "header" style = "width: 100%; text-align: center">
            <h1 style = "color: white">Header</h1>
        </div>


        <div id = "buttons" style = "float: left; width: 100%">

            <div id = "column_div1" style = "float: left; width: 33%">
                <div id = "button_div1" style = "width: 280px; margin: 0 auto">
                    <img id = "text1" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>

                <div id = "button_div2" style = "width: 280px; margin: 0 auto">
                    <img id = "text2" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>
            </div>


            <div id = "column_div2" style = "float: left; width: 33%">
                <div id = "button_div3" style = "width: 280px; margin: 0 auto">

                    <img id = "text3" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>

                <div id = "button_div4" style = "width: 280px; margin: 0 auto">

                    <img id = "text4" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>
            </div>


            <div id = "column_div3" style = "float: left; width: 33%">
                <div id = "button_div5" style = "width: 280px; margin: 0 auto">

                    <img id = "text5" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>

                <div id = "button_div6" style = "width: 280px; margin: 0 auto">

                    <img id = "text6" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" style = "width: 280px; height: 40px; margin: 0; border: 1px solid #DDD" />
                </div>
            </div>

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

script.js

$(document).ready (function() {

    $(document).on ("mouseenter", "#text1", function() {
        $("#descr").remove();
        $("#button_div1").append ("<div style = 'background-color: white; width: 280px; height: 150px; margin: 0 auto; border: 1px solid #DDD' id = 'descr'></div>");
        $("#descr")
            .hide()
            .append ("<h3 style = 'float: left; height: 100px'>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();
        });
    });

});

デモ: http://jsfiddle.net/UVtyk/

4

1 に答える 1

1 
$("#button_div1").append ("<div style = 'background-color: white; width: 280px; height: 150px; margin: -5px auto 5px auto; border: 1px solid #DDD' id = 'descr'></div>");
于 2013-06-24T13:52:16.320 に答える