Question

我有一个div，当鼠标悬停在其上方时，子div从底部展开，显示其所有隐藏内容。但是，div似乎从底部开始有所收缩，从而使其下方的元素略有上升。

Here is an fiddle showing exactly what's going on.

body {
  color:white;
}

.game-thumbnail {
    background-color: rgba(23, 30, 26, 0.95);
    margin-top:-15%;
    position:relative;
    z-index:1;
    padding:0.5em 1em;
    transition: margin 0.333s ease-out, padding 0.333s ease-out;
}

.game-entry {
    cursor:pointer;
    width:66vw;
    max-width:500px;
}

.game-entry img {
    width:100%;
    position:relative;
}

.game-entry:hover .game-thumbnail {
        margin-top:-30%;
        padding-bottom:15%;
        bottom:0;
}
.game-entry:hover .moreinfo {
        opacity:1;
        transition:opacity ease-out;
        transition-duration: 0.4s;
        transition-delay: 0.3s;
}

.moreinfo {
    opacity:0;
    transition-duration: 0.2s;
    transition-delay: 0s;
    background-color:#171e1a;
    width:25%;
    padding:5px;
    text-align:center;
    position:relative;
    float:right;
}

<div class="container-fluid my-0 px-5 py-1">
    <div class="container-fluid p-2 d-none d-md-block">
        <div class="row">
            <div class="col-sm-auto p-2">
                <div class="container-fluid p-0 m-0 game-entry">
                    <img src="https://i.imgur.com/cxLk553.png">
                    <div class="container-fluid game-thumbnail">
                        <h4>My Dog's Tale</h4>
                        <p>Follow the adventures of My Dog</p>
                        <div class="moreinfo">More info...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h1 class="my-4" style="color:black;">This should not go up</h1>

我原本只是想将文本向上定位，使div在顶部变大，但背景仍留在图像后面。

尽管我正在寻找仅CSS3的解决方案，但欢迎使用jQuery解决方案。

Answer 1

使用边距调整元素的位置时，它将影响页面其余部分的DOM流程。这就是为什么它影响下面的元素的位置的原因。

我建议使用transform完成这样的动画。例如，transform: translateY(-30%);。这将使元素“向上”移动而不影响DOM流。

查看更新后的fiddle here。

从底部增加div容器而不更改基线

1 个答案: