因此,我有一个包含标题和描述的内容框,它们位于 div 的底部。最初,描述是隐藏的。我想要做的是,当您将鼠标悬停在 div 上时,标题应该向上移动并显示具有动态高度的描述。
这是我现在拥有的:https://codepen.io/tayanderson/pen/qJrmXE
问题是如果描述是 1 行或 3 行,它就不会正确显示。标题 div 应根据描述 div 的大小向上移动。
Here's an example of what I'm trying to do
HTML
<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur</div>
</div>
CSS
.grid-item {
height:300px;
background-size: cover;
width:300px;
position: relative;
overflow: hidden;
color: #fff;
.title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 20px;
}
.desc {
position: absolute;
bottom: 0;
transform: translateY(100%);
padding: 5px 20px;
}
&:hover .title {
bottom: 30%;
}
&:hover .desc {
transform: translateY(0%);
}
}
最佳答案
这就是你的意思?
.inner, .inner:hover .grid-item.inner {
-webkit-transition:all linear 0.2s;
transition:all linear 0.2s;
}
.inner {
background: #afa;
width: 300px;
overflow: hidden;
position: absolute;
}
.grid-item:hover .inner{
margin-top: -100px;
}
<a class="grid-item" href="{{ .Permalink }}" style="background-image: url(images/recipes/{{.Params.image}})">
<div class="inner"><h3 class="title is-3">{{.Title}}</h3></div>
<div class="content"><p class="grid-item-blurb">{{.Description}}</p></div>
</a>
关于javascript - 在容器内的另一个 div 下方显示一个具有动态高度的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52729010/