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

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>