html - :hover to display div 上的 CSS 过渡

Question

因为我是初学者，所以我真的很纠结这个问题。

你能告诉我如何在悬停时转换 .box 的 position 吗？

我只能显示它，但我不能transition position 从bottom 到top 这是我想做的。

.more {
  position: relative;
  height: 100px;
}

.box {
  display: none;
  position: absolute;
  background: white;
  border-radius: 4px;
  height: 43px;
  width: 169px;
  top: 50px;
  transition: top 5s;
}

.more:hover .box {
  top: 100px;
  display: block;
}

<div class="col-sm-1  more">
  <a href="#" class="paragraphs " id="xx">More</a>
  <div class="box">
    <span>Pages</span>
  </div>
</div>

Answer 1

尝试使用 visibility 而不是 display。可见性在过渡时效果更好。

.more {
  position: relative;
  height: 100px;
}

.box {
  position: absolute;
  background: white;
  border-radius: 4px;
  height: 43px;
  width: 169px;
  top: 50px;
  transition: top 5s ease;
  visibility: hidden;
}

.more:hover .box {
  top: 100px;
  display: block;
  opacity: 1;
  visibility: visible;
}

<div class="col-sm-1  more">
  <a href="#" class="paragraphs " id="xx">More</a>
  <div class="box">
    <span>Pages</span>
  </div>
</div>