下拉内容纯CSS
下拉内容纯CSS
提问于 2018-07-24 15:38:09
基本上我有4个，我希望当用户悬停封面图像div时，在div的左侧显示一些内容(content-description div)。我根本不想折叠封面图片div。你可以这样想:内容描述需要隐藏在封面后面，当用户悬停封面图像时，内容描述需要以小动画显示在左侧。我需要一个纯CSS解决方案。
<div class="main">
<div class="main-top">
<div class="content-description">
<div class="cover-image"></div>
</div>
</div>
</div>应用于这些div和的CSS不能更改flex-box属性。
.main{
width: 180px;
}
.main-top {
position: relative;
height: 150px;
display: flex;
align-items: flex-end;
}封面图片只包含一个背景图片。
回答 1
Stack Overflow用户
发布于 2018-07-24 16:00:21
您可以使用您的div的:hover psuedo类。您可以隐藏想要在position: absolute目录中显示的内容，而只在div:hover上显示它。
请看我的代码：
HTML：
<div class="content-description">
<div class="content-d-hover">
<p>
yay content
</p>
</div>
</div>CSS：
.content-description{
width: 100px;
height: 100px;
position: relative;
}
.content-description:hover .content-d-hover{
opacity: 1;
transition: 0.5s all;
}
.content-d-hover{
position: absolute;
width: 80px;
height: 80px;
top: 10px;
right: -90px;
opacity: 0;
transition: 0.5s all;
}您还可以查看my plunkr
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51493045
复制相关文章
相似问题