1

私のjsFiddle

私には 3 つの親があり、未定義の数の子が含まれます (親はフローティングです)。子は相対的です。スキームは次のようになります。

-----Parent-----   ------Parent------  ----Parent----
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | |   Child    |
|    Child     |   |     Child       | --------------
----------------   -------------------

マウスオーバーすると、子はより大きな高さにサイズ変更されますが、オーバーラップさせたいので、親を拡張したくありません。

私のcssは次のようになります：

    .parent{
    position:relative;
    float:left;
    width:296px;
    background-color:pink;
    margin-right:10px;
}

    .child{
        position:relative;
        height:60px;
        margin-bottom:10px;
        background-image:url("../images/theme_test.png");
    }

上、Y 位置を使おうとしましたが、うまくいきません。

4

3 に答える 3

2

どうぞ: jsFiddle .

s を使用して位置を更新しましたが、margin次の 2 つの点に注意してください。

  1. z-indexホバーされた要素が一番上になるように変更する必要がありました
  2. 私は最後の子供のための特別な扱いを作成しました - 親を長くしないように、成長させるのではなく成長させます

これはmouseenterイベントです：

$('.child').mouseenter(function() {
        $(this).css('z-index',5);
        if($(this).is(':last-child')){ // check if this is the last child
            $(this).animate({
                height: "80px",
                'margin-top': "-20px" // grow upwards..
            }, 250 );
        }else{
           $(this).animate({
                height: "80px",
                'margin-bottom': "-10px" // grow down wards..
            }, 250 );
        }
    })

mouseoutは正反対です。

于 2013-06-29T21:25:10.467 に答える
0

私は過去に似たようなことをしたことがあります。JavaScript や jquery は必要ありません。

必要なのは、すべての子に相対位置を設定し（これを行った）、すべての子内に絶対位置を持つ別のコンテナを作成することです。次に、CSS コードを追加して、ホバー時にこのコンテナーの高さを変更し、z-index を適切に調整します。

更新: 以前に投稿したコードを更新しました。高さを増やすだけでなく、最後の子のCSSを使用して最後の子を上に移動しました。結果はjavascriptを使用した場合と同じですが、個人的には不要な場合はJSを使用しないでください.

これが更新されたjsFiddleです（トランジションとボーダーが追加されました-見栄えがします:)）

CSS:

.parent{
    position:relative;
    float:left;
    width:100px;
    background-color:pink;
    margin-right:10px;
}
.child{
    position:relative;
    height: 60px;
    margin-bottom:10px;
}
.child > .content {
    position: absolute;
    width: 100%;
    height: 60px;
    background-color:cyan;
    z-index: 1;
}

.child:hover > .content {
    background: red;
    height: 100px;
    z-index: 2;
}

.child:last-child:hover > .content {
    height: 100px;
    bottom: 0px;
}

HTML:

<div class="parent">
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
</div>
<div class="parent">
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
    <div class="child">
        <div class="content"></div>
    </div>
</div>
于 2013-06-29T21:27:15.230 に答える
0

親 div の高さの変更を防止するためのいくつかのステートメントを実装することで Yotam のフィドルを編集しましたif(ある場所から別の場所にすばやく移動した場合)。別の人に。これは、列内の別の子が現在アニメーション化されているかどうかを確認し、それが完了するまでアニメーションを許可しないことによって行われます: if(!animating). 唯一の問題は、一方が他方から他方へすばやく移動する場合に発生するためmouseenter、他方がアニメーションを停止する前に発生します。どちらが好きかはあなたが決めることができます。ここにjsFiddleがあります

CSS を使用すると、Majky が言ったように素晴らしいでしょう。それが私が個人的に行う方法です。

于 2013-06-29T21:45:20.607 に答える