我有一个带有图像的 div (div_one)。在这个 div 下,我有另一个较小的 div (div_two)。 我想在悬停后,调整这个 div_one (带有图片)的大小(较小的高度)并显示这个 div_two,它位于图像下方。 但它并没有按照我想要的方式工作。图像跳转:/
.images {
background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
height: 200px;
width: 150px;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: flex-end;
}
.images:hover {
height: 150px;
width: 100px;
}
img {
height: 200px;
width: 150px;
}
.info {
display: none --> I want this to show after hover
}
<div class="images">
<div class="info">lorem ipsum</div>
</div>
有什么想法吗?
最佳答案
如果你想以更好的方式显示它,可以将其移到父元素之外。
.images:hover + .info
将选择另一个元素。我更喜欢使用不透明度
更改方式。非悬停状态的
transition
属性将有助于演示,即图像不会跳转。
.images {
background: url('https://www.lokeshdhakar.com/projects/lightbox2/images/image-3.jpg');
height: 200px;
width: 150px;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: flex-end;
transition: all ease 1s;
}
.images:hover {
height: 150px;
width: 100px;
}
img {
height: 200px;
width: 150px;
}
.info {
opacity: 0;
transition: all ease 1s;
}
.images:hover+.info {
opacity: 1;
}
<div class="images">
</div>
<div class="info">lorem ipsum</div>
关于html - CSS中如何将div向上移动以显示另一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64467226/