Question

我只想将鼠标悬停在上方即可移动盒子。我可以将鼠标悬停在每个框上，但不能使其向上移动。这是我的代码：

ENV['TZ'] = 'US/Pacific'
Time.now # => 2018-09-09 07:22:30 -0700
Time.local(2018, 9, 9, 7, 20) # => 2018-09-09 07:20:00 -0700
Time.local(2018, 3, 9, 7, 20) # => 2018-03-09 07:20:00 -0800

这是我的LIVE DEMO

Answer 1

您给出的示例是通过两个CSS属性完成的：

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
  transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}

Answer 2

您应使用transform，如下所示：

body {
  text-align: center;
}

.row {
  padding: 50px 0;
}

.post-item {
  outline: 1px solid red;
  padding: 50px 20px;
  border: 5px solid transparent;
  transition: all 200ms ease;
}

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translateY(-3px);
}

Answer 3

当您将元素悬停向上移动时，可以添加以下代码。

this

鼠标悬停时如何向上移动框？

3 个答案: