CSS过渡，位置在悬停时不断移动

Posted 2023-03-06

【中文标题】CSS过渡，位置在悬停时不断移动

【英文标题】：CSS transition, position keeps moving on hover

【发布时间】：2016-09-12 00:11:47

【问题描述】：

我在right 属性上有一个简单的css 转换，用于在您悬停时简单地移动箭头的按钮。问题是当您悬停时，它没有正确转换，如果您刷新（或重新运行）JSFiddle，那么您会注意到箭头在悬停后移动位置。

就像它向后移动，然后向前然后又回来？

这似乎只发生在 Firefox 中。

JSFiddle

【问题讨论】：

你想让箭头在悬停时无限移动吗？

当您悬停时，它应该向右移动，但它会先向左然后向右移动。然后，如果您刷新/重新运行，它会重新定位箭头。

对我来说看起来不错。 OSX 上的 Chrome 50

看起来是 Firefox 问题！

似乎箭头用于“悬停”的位置正在呈现为开始位置（在 Firefox 中）。当您将鼠标悬停在按钮上时，它会突然识别出开始位置不同，因此从那里开始播放动画。这就是你看到“跳跃”的原因。我会做一些摆弄，但它可能是一个 FF 错误。

【参考方案1】：

发现问题。您的 span 是内联的，给它position: relative 会导致问题。

只需更改为 inline-block 即可：

.genericBtn span 
  display: inline-block;
  position: relative;

【讨论】：

这就是我要说的。我对你的支持。另一种解决方案是删除跨度，这是不必要的

你比我早 8 秒得到答案，所以删除我的回复；)

@AaronLavers 一直发生在我身上！ :D

不知道这个......直到谢谢:)

感谢 Narxx！我添加跨度的唯一原因是我可以相对于文本而不是整个按钮定位箭头。

【参考方案2】：

如何通过使用 CSS 伪元素来使用更微妙的方法：

.genericBtn 
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 30px;
  width: 300px;
  position: relative;

.genericBtn::after 
  content: ">";
  position: absolute;
  right: 37%;
  transition: all .3s ease-in;


.genericBtn:hover::after 
  transform: translate(10px,0); 

---

这是Fiddle