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。

我已经使用margins 更新了职位并注意了两件事：

  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

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

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

于 2013-06-29T21:45:20.607 回答
0

我过去做过类似的事情。你真的不需要任何 javascript 或 jquery。

您需要为每个孩子设置相对位置（您已经完成）并在每个孩子内部创建另一个具有绝对位置的容器。然后只需添加一些 css 代码来更改此容器在悬停时的高度并正确调整 z-index。

更新： 我已经更新了您之前发布的代码。只是使用 last-child 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 回答