Question

这应该很简单。

我的HTML中有很多锚点，如下所示：

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>

在CSS中我放置了一个悬停效果来执行translate: transform();

a {
  font-size: 2em;
  transition: all .3s ease-out;
}

a:hover {
  transform: translate(0, -5px);
}

现在，当您将它们悬停时，这应该会使锚点向上移动5个像素。它们确实如此，但即使鼠标仍在徘徊，它们也会立即拍下来。其他人遇到这种行为，并找到了解决方案？我希望保持活跃的效果，而鼠标悬停。 Codepen链接：http://codepen.io/BrianEmilius/pen/NqoLQo

Answer 1

这是因为，在转换时，您不再只是悬停在完全链接上。

如果你建立链接display:inline-block，你可能会得到更好的结果。

＆＃13;

a {
  font-size: 2em;
  transition: transform .3s ease-out;
  display: inline-block;
}
a:hover {
  transform: translate(0, -5px);
}

＆＃13;

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>

＆＃13;

Answer 2

这种情况正在发生，因为默认情况下a元素显示inline，translate属性只能正确影响块级元素。

要解决此问题，只需将a元素的display属性设置为inline-block：

a {
  display: inline-block;
  ...
}