CSS3 transform:平移悬停，带过渡

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个像素。它们确实这样做了，但它们会立即咬下去，即使老鼠还在盘旋。还有其他人遇到过这种行为并找到了解决方案吗?当鼠标悬停时，我希望效果保持活跃。代码链接:http://codepen.io/BrianEmilius/pen/NqoLQo

Answer 1

这是因为，在转换时，您不再将鼠标悬停在确切的链接上。

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

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

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

Answer 2

这是因为默认a元素具有inline显示，而translate属性只能正确影响块级元素。

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

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

<<p> Codepen演示/strong>。