Question

基本上我有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;
}

封面图片仅包含背景图片。

Answer 1

您可以使用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

下拉内容纯CSS

1 个答案: