下拉内容纯CSS

时间:2018-07-24 07:38:09

标签: css css3 flexbox

基本上我有4个div,我希望当用户将 cover-image 鼠标悬停时,在div的左侧显示一些内容(content-description div)。我根本不想折叠Cover-image 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 个答案:

答案 0 :(得分:0)

您可以使用div的:hover伪类。您可以隐藏要显示在position: absolute div中的内容,然后将其显示在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