javascript - 如何使用 jquery 或 css 使 div 悬停并停留在页面底部？

Question

当鼠标悬停在 div 框上时，我试图使它下降。到目前为止，我已经使用 @keyframes 在 css 中完成了此操作，但是当您停止悬停时，该框会重新出现在顶部。

我希望这些框保持在页面底部，就好像它们掉落了一样。有没有办法在 css 或 Jquery 中做到这一点？谢谢!

Answer 1

虽然动画不流畅，但我想这就是你要找的。

这是一个Codepen我刚刚创建。如果你想让它位于包装器的底部而不是主体，你应该给你的包装器 div a position: relative .

div.drop-me {
  width: 200px;
  height:200px;
  background: #000;
}
.hovered {
  position: absolute;
  bottom:0;
}

<div class="drop-me"></div>

$('div.drop-me').hover(function(){
  $(this).addClass('hovered');
});

把这个加到你的头上

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>