CSS 过渡：悬停显示 div答案

【问题标题】：CSS transition on :hover to display divCSS 过渡：悬停显示 div
【发布时间】：2018-01-16 15:35:20
【问题描述】：

由于我是初学者，我真的很挣扎。

你能告诉我如何在悬停时转换.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>

【问题讨论】：

“top”到底是什么意思？
好吧，我给出了相对位置，所以我认为应该使用属性 top 来改变位置，但我真的不知道
您能否添加更多您的HTML，以便我可以看到更多内容在页面上的位置？

标签： html css hover transition

【解决方案1】：

转换通过在旧值和新值之间进行插值来工作。您在这里看到的问题是，从技术上讲，旧值一开始就没有被应用。

将.box 设置为display: none 基本上是在说“根本不渲染它”，并且转换不能在不存在的东西和另一个值之间转换。使用visibility 而不是display 解决了这个问题，因为visibility: hidden 只隐藏元素，而不是完全删除它。

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

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

.more:hover .box {
  top: 100px;
  visibility: visible;
}

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

如果您希望转换反向工作，那么您可以添加另一个延迟可见性的转换。

【讨论】：

【解决方案2】：

试试这个：如果需要，您可以轻松更改框类中的边距和过渡速度:)

 .box {
  position:absolute;
  top:0;
  margin-top:400px;
}
.more:hover .box {
    margin-top:0;
  -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

【讨论】：

【解决方案3】：

尝试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>

【讨论】：