Css+；Jquery以实现这种重叠

我有3个父母，其中包含未定义数量的子女，（父母是浮动的）子女是相对的，方案如下：

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

    .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");
    }

鼠标悬停时，子对象将调整到更大的高度，但我希望它们重叠，我不希望扩展父对象

我的css如下所示：

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

    .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位置，但它不起作用，下面的孩子们的吼声将下降。

好了：

我使用

边距
s更新了仓位，注意两件事：

我必须更改
z-index
，以便悬停的元素位于顶部
我为最后一个孩子创造了一种特殊的治疗方法——让孩子长大而不是长大，这样就不会让父母变长
这是
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
正好相反。
我过去也做过类似的事情。您实际上不需要任何javascript或jquery

您需要的是在每个子对象上设置相对位置（您已经这样做了），并在每个子对象内创建另一个具有绝对位置的容器。然后只需添加一些css代码来更改悬停时容器的高度，并适当调整z索引

更新：
我已经更新了你之前发布的代码。只是使用了最后一个子css来向上移动最后一个子，而不是仅仅增加高度。结果和使用javascript是一样的，但我个人会在不需要的时候避免使用JS

此处已更新（添加了过渡和边框-看起来不错：））

CSS:

HTML:

我通过实现一对
if
语句编辑了Yotam的小提琴，以防止父div的高度发生变化（如果您从一个快速移动到另一个，则其高度会发生变化），并防止有时如果鼠标从一个快速移动到另一个，则会反复设置孩子的动画。这是通过检查列中的另一个子项当前是否正在设置动画，并且在完成之前不允许设置动画来完成的：
if（！animating）
。唯一的问题是，如果一个鼠标从一个快速移动到另一个，那么在另一个停止动画之前，
mouseenter
就会出现。你可以决定你更喜欢哪个

使用CSS会很棒，就像Majky说的那个样很棒，我个人就是这么做的
请创建一个包含CSS和HTML标记的JSFIDLE，不是这样。尝试将边框添加到父类中，并确保不会发生任何事情。是的。对不起，我的意思是孩子们超过了父母的身高。。我想他想让孩子们呆在父母家里我不好，那样的话，jquery将是唯一的办法。我想他只想让其他孩子留在原处：）现在它和你的JS.NICE JOB一样：）我已经用过渡和边框更新了你的帖子-看看新的jsFiddle请不要完全依赖到第三方网站的链接，即使是像jsFiddle一样可靠的网站。最好在这里发布代码并使用fiddle作为支持。updated-添加了mouseenter事件和一些注释来解释