悬停时向上移动 HTML 元素答案

【问题标题】：Move HTML element upwards on hover悬停时向上移动 HTML 元素
【发布时间】：2016-01-21 04:40:41
【问题描述】：

每当用户将鼠标悬停在 HTML 上时，我都会尝试将其向上移动大约 10 像素。我对 w3schools 进行了一些研究，但找不到任何对我有帮助的信息。他们的大多数动画示例都使用了关键帧，我很确定这不是我需要的，因为我试图在有人悬停在元素上时触发动画。不过我可能是错的，这就是我在这里发帖的原因。

这是我要移动的元素：

<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

对于我的 CSS：

#arrow {
  padding-top: 310px;
  color: #5C6B7E;
  position: relative;
  /* some kind of animation property here? */
}

#arrow:hover {
  /* new properties once user hovers */
}

我不确定我需要添加什么来使元素动画化，w3schools 上的示例并没有太大帮助。如果有人能指出我正确的方向，我将非常感激。谢谢 Stack Overflow。

【问题讨论】：

悬停时可以使用关键帧动画；一种或另一种方式，您在悬停时设置样式更改。虽然在这种情况下，您只需要从 A 点移动到 B 点，因此不需要关键帧（查看 CSS 过渡）。

标签： html css css-animations

【解决方案1】：

您不需要为这个简单的动画使用关键帧。只需 CSS 过渡就足够了。

在初始状态样式规则中设置transition属性与持续时间。

#arrow {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
#arrow:hover {
  top: -10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

【讨论】：

感谢bhai救生员

【解决方案2】：

如果您的元素绝对定位，您也可以尝试在悬停时应用否定的margin-top：

div {
  padding: 1em;
  border: 1px solid #b5b5b5;
  border-radius: 10px;
  width: fit-content;
  transition: 0.5s;
}

div:hover {
  box-shadow: 0 0 3px black;
  margin-top: -10px;
}

<br/>
<div>
  <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>

【讨论】：

【解决方案3】：

我在尝试解决使用鼠标悬停在元素上时移动元素时遇到的问题时遇到了这个问题。以上都不起作用，所以我想我会分享我在我运行的测试中提出的解决方案：

.item {
  background-color: black;
  display: flex;
  width: 100px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  transition: transform ease 300ms;
}

.item:hover {
  transform: translate(0, -10px);
}

&lt;div class="item"&gt;TEST&lt;/div&gt;

【讨论】：