jquery - css + Jquery 为了实现这种重叠

Question

My jsFiddle

我有 3 个 parent ，其中将包含未定义数量的 child ，( parent 是 float 的) child 是相对的，方案如下所示:

-----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 位置但它不起作用，下面的 child 会掉下来。

Answer 1

给你:jsFiddle .

我已经使用 margin 更新了头寸并注意到两件事:

1. 我必须更改 z-index 以便悬停的元素位于顶部
2. 我为最后一个 child 创造了一种特殊待遇——让它长大而不是倒下，这样就不会让 parent 更长

这是 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 恰恰相反。