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 个像素。他们确实这样做了，但他们会立即折断，即使鼠标仍在悬停。还有其他人遇到过这种行为并找到了解决方案吗？我希望效果在鼠标悬停时保持活动状态 。代码笔 link: http://codepen.io/BrianEmilius/pen/NqoLQo

Answer 1

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

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

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

Codepen Demo.

Answer 2

这是因为，在变换时，您不再将鼠标悬停在 exact link 上。

如果你做 links 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>

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

CSS3 transform: translate on hover, with transition

html

css

css-transitions

css-transforms