CSS3变换：悬停时平移，带转场

沃梦达教程前端问题

2022-01-01

CSS3 transform: translate on hover, with transition(CSS3变换：悬停时平移，带转场)

本文介绍了CSS3变换：悬停时平移，带转场的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这应该非常简单。

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

推荐答案
这是因为在转换时，您不再将鼠标悬停在精确的链接上。

如果您创建链接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变换：悬停时平移，带转场的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！