在悬停

Question

每当用户将鼠标悬停在其上时，我都会尝试将HTML移动大约10px。我对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。

Answer 1

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

使用持续时间在初始状态样式规则中设置<?php print it "Hello, World!"; ?> 属性。

transition

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

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

Answer 3

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

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