CSS3变换：悬停时平移，带过渡效果

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

- Brian Emilius

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>

- Paulie_D

---

抢我一步了。还有，别忘了特定供应商。Codepen：http://codepen.io/anon/pen/waNYKN - Josh Salazar

是的，这就做到了！我觉得这应该是一个简单的解决方案 :) @JoshSalazar 是的，大多数情况下codepen不需要供应商前缀，但它们在我的项目代码中。 - Brian Emilius

实际上这似乎不是由于点击区域的原因。如果您查看我链接的答案中的第二个片段，您会发现即使在执行 body:hover 时也会出现相同的行为。它似乎更多地与加速渲染过程有关。然而，解决方案仍然是相同的 :) - Harry

@Harry 是的...我看到你找到了正确的重复目标。我已经删除了那部分。 - Paulie_D

Answer 2

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

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

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

Codepen演示。

- James Donnelly