2 
<html>
<body>
    <div id="btn">
        <div id="reveal">
        </div>
    </div>
    <div id="btn2">
        <div id="reveal2">
        </div>
    </div>
    <style>
        #btn, #btn2
        {
            background-color: red;
            height: 100px;
            width: 200px;
        }
        #btn2
        {
            margin-top: 10px;
        }
        #reveal, #reveal2
        {
            background-color: green;
            height: 400px;
            width: 200px;
            display: none;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        $('#btn').hover(function () {
            $('#reveal', this).stop(true, true).slideDown("normal");
        }, function () {
            $('#reveal', this).stop(true, true).hide();
        });
    </script>
</body>
</html>

Webページにタブの壁があり、ユーザーがタブをロールオーバーしたときに、ロールオーバーされたのと同じタブとその下に配置されているタブの上をdivがスライドするようにします。

私のデモコードを実行すると、表示されているdivがページのさらに下のdivの後ろにあることがわかります。

これを機能させることは可能ですか？

また、内部divをそのコンテナよりも高くするのは悪いことですか？

私がやろうとしたもう1つのことは、内側のdivをそれ自体で外側に配置し、ボタンの上に表示されるように絶対に配置することでした。

position: absolute;
top: 0;

これにより、不幸な効果が発生し、btndivがアニメーションを再トリガーし続けます。ただし、レベルの問題は修正されます。

4

2 に答える 2

5

and要素に追加position:relativeし、要素にaを追加するだけです。btnrevealz-index:999reveal

また、一般的なスタイルと動作を持つ要素にクラスを使用することをお勧めします。

HTML

<div class="btn">
    <div class="reveal"></div>
</div>
<div class="btn">
    <div class="reveal"></div>
</div>

CSS

.btn {
    background-color: red;
    height: 100px;
    width: 200px;
    position:relative;
    margin-bottom:10px;
}
.reveal {
    background-color: green;
    height: 400px;
    width: 200px;
    display: none;
    z-index:999;
    position:relative;
}

およびjquery

    $('.btn').hover(function () {
        $('.reveal', this).stop(true, true).slideDown("normal");
    }, function () {
        $('.reveal', this).stop(true, true).hide();
    });

http://jsfiddle.net/gaby/T7USy/でのデモ

于 2013-02-07T17:41:39.740 に答える
4

これはあなたが望むものですか：フィドル

<!doctype html>
<html>
<body>
    <div id="btn">
        <div id="reveal">1111111111</div>
    </div>
    <div id="btn2">
        <div id="reveal2">222222222</div>
    </div>
    <style>
        #btn, #btn2 {
            background-color: red;
            height: 100px;
            width: 200px;
            position:relative;
            z-index:3;
        }
        #btn2 {
            margin-top: 10px;
            z-index:1;
        }
        #reveal, #reveal2 {
            background-color: green;
            height: 400px;
            width: 200px;
            display: none;
            position:absolute; /*<--update it*/
            left:0;            /*<--update it*/
            top:0;             /*<--update it*/
            z-index:2;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        $('[id^=btn]').hover(function() {
            $('[id^="reveal"]', this).stop(true, true).slideDown("normal");
        }, function() {
            $('[id^="reveal"]', this).stop(true, true).hide();
        });
    </script>
</body>

于 2013-02-07T17:37:27.760 に答える