Question

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

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

我只能展示它，但我无法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。可见性在转换时效果更好。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

过渡通过在旧值和新值之间进行插值来实现。您在这里看到的问题在技术上从一开始就没有应用旧值。

将.box设置为display: none基本上是在说，＆＃34;根本不做这个，＆＃34;过渡不能在难以存在的东西和另一个价值之间转换。使用visibility代替display修复了问题，因为visibility: hidden只隐藏了元素，而不是完全删除它。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果您希望转换反向运行，则可以添加另一个延迟可见性的转换。

Answer 3

试试这个：如果需要，您可以轻松更改框类中的边距以及转换中的速度：）

 .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;
}

CSS转换：悬停以显示div

3 个答案: