div 在 CSS 悬停时向上滑动答案

【问题标题】：Div slide up on CSS hoverdiv 在 CSS 悬停时向上滑动
【发布时间】：2021-02-23 05:44:32
【问题描述】：

我有 div，当您将鼠标悬停在另一个 div 上时，它会隐藏并出现。当隐藏的div 出现时，我还想要一个向上滑动的过渡。

HTML

<div class="clickhere">Hover here</div>
<div class="showme">Show me</div>

CSS

 .showme {display: none;}
 .clickhere:hover + .showme {display: block;}

我需要添加哪些额外的 CSS 才能实现上滑过渡？

我想实现的过渡示例可以在图标部分（第二行）of this website看到

【问题讨论】：

标签： html css css-animations css-transitions

【解决方案1】：

您可以使用opacity: 0 隐藏它并使用transform: translateY(100%) 偏移它，而不是使用display: none 隐藏元素，然后在悬停时使用CSS 过渡平滑地为这些属性设置动画：

.showme {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.5s, opacity 0.5s;
}

.clickhere:hover + .showme {
  opacity: 1;
  transform: translateY(0);
}

<div class="clickhere">Hover here</div>
<div class="showme">Show me</div>

【讨论】：