Question

我已将JSFiddle放在一起，我满意的是正确的代码。正如您所看到的，当您将鼠标悬停在＆＃39; a＆＃39;元素我有一个div位于底部加注以显示隐藏的文本＆＃39;

＆＃13;

a {
  display: block;
  width: 200px;
}

a:hover .b {
  bottom: 0px;
}

.a {
  height: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;
}

.c {
  height: 50px;
  background-color: green;
}

＆＃13;

<a href="http://www.google.com">
  <div class="a">
    <div class="b">

      <div class="c">
        A title
      </div>
      <div class="c">
        Read more
      </div>

    </div>
  </div>
</a>

＆＃13;

我遇到的问题是底部div的显示太快了，是否有一个css属性允许div缓慢上升？

this网站（部分页面中）使用了类似的方法，我尝试复制这种方法。

有关如何实现这一目标的任何想法？

Answer 1

在css中的b元素上添加transition css属性以指定关联样式所需的时间：

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;

  transition: bottom 1s;
  -webkit-transition: bottom 1s;
}

显示隐藏的内容 - 光滑的外观

1 个答案: