0

悬停时左上角的按钮向下滑动一个带有示例描述的 div。有两个问题我解决不了。

  1. 描述必须与第二个按钮合并，但它与第一​​个按钮合并。
  2. 我无法控制按钮、描述等之间的距离。

提前致谢。

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

脚本.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 回答