基本上我有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;
}
封面图片只包含一个背景图片。
发布于 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
https://stackoverflow.com/questions/51493045
复制相似问题