Div 在 CSS 悬停时向上滑动

Question

我有 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

Answer 1

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

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

Div 在 CSS 悬停时向上滑动

Div slide up on CSS hover

html

css

css-transitions

css-animations