Question

我有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位置，但它不起作用，孩子们下面会下降。

Answer 1

你去了：jsFiddle。

我已使用margin更新了排名，并注意了两件事：

我必须更改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恰恰相反。

Answer 2

我过去做过类似的事情。你真的不需要任何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>

Answer 3

我通过实施一些if语句来编辑Yotam的小提琴，以防止更改父div的高度（如果你快速从一个移动到另一个，他会这样做）并防止孩子一遍又一遍地被动画有时，如果鼠标从一个快速移动到另一个。这是通过检查列中的另一个孩子当前是否正在动画并且在完成之前不允许动画来完成的：if(!animating)。唯一的问题是如果一个人从一个快速移动到另一个，所以mouseenter发生在另一个停止动画之前。你可以决定哪个更好。 Here is the jsFiddle

使用CSS会很棒，就像Majky说会很棒，这就是我个人的意思

Css + Jquery为了实现这种重叠

3 个答案: