CSS3变换：悬停翻译，带过渡[重复]答案

【问题标题】：CSS3 transform: translate on hover, with transition [duplicate]CSS3变换：悬停翻译，带过渡[重复]
【发布时间】：2015-08-07 00:02:46
【问题描述】：

这应该很简单。

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

【问题讨论】：

【解决方案1】：

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

如果您创建链接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>

【讨论】：

打败我。另外，不要忘记特定于供应商的信息。代码笔：codepen.io/anon/pen/waNYKN
是的，它做到了！认为这将是一个简单的解决方案 :) @JoshSalazar 是的，codepen 在大多数情况下不需要供应商前缀，但它们在我的项目代码中。
其实好像不是命中区域的原因。如果您查看我链接的答案中的第二个 sn-p，您会发现即使您执行 body:hover 也会发生相同的行为。它似乎更多地与加速渲染过程有关。然而，解决方案仍然是相同的:)
@Harry 是的...我看到你找到了正确的欺骗目标。我已经删除了那部分。

【解决方案2】：

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

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

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

【讨论】：