2

新しい/非表示の div を別の div の下からスライドさせたい。アイデアは、入力フィールドと追加ボタンがあるということです。追加ボタンをクリックすると、さらに多くのフォーム要素が表示されます (下にスライドします)。これのフォーム部分は私の問題にとって重要ではないので、最初の div を「ホバーして新しい div を表示する」というテキストにし、新しいスライドダウン div をランダムなテキストにします。

これまでのところ、私はこのhtmlを持っています:

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>

そしてこのCSS：

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: absolute;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    }

.one:hover + .two {
    top: 100px;
}

jsfiddle を参照してください: http://jsfiddle.net/8ZFMJ/

この種の作品。しかし、2 番目の div は最初の div よりも高いため、最初の div の上に表示されます。これは望ましくありません。最初の div を好きなようにスライドさせるにはどうすればよいですか? その過程で、最初の div の位置を知る必要がある最初の div がなくなった場合、それも良いでしょう...

4

2 に答える 2

4

2 つの div をコンテナーに入れ (2 つの div の高さを合わせて)、div をコンテナーの最上部に配置します。次に、コンテナをoverflow:hidden;

このようなもの: http://jsfiddle.net/8ZFMJ/2/

よろしく

于 2013-09-06T06:38:44.813 に答える