Html CSS转换，位置保持悬停移动

我在按钮的

右侧

属性上有一个简单的css转换，当你悬停时，它只会移动一个箭头。问题是，当您悬停时，它没有正确转换，如果您刷新（或重新运行）JSFIDLE，那么您将注意到箭头在悬停后移动了位置

就像它向后移动，然后向前再向后移动

这似乎只发生在Firefox中

---

找到了问题。您的span是内联的，给它

位置：relative

导致了问题

只需切换到

内联块即可：

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

通过使用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); }


这是一个你想让箭头在悬停时无限移动的例子？当你悬停时，它应该向右移动，但它会先向左然后向右移动。然后，如果你刷新/重新运行，它会重新定位箭头。对我来说很好。OSXLooks上的Chrome50就像Firefox一样！箭头用于“悬停”的位置似乎呈现为起始位置（在Firefox中）。当您将鼠标悬停在按钮上时，它会突然意识到开始位置不同，因此会从那里播放动画。这就是为什么你会看到“跳跃”。我会做一些摆弄，但这可能是一个FF错误。这就是我要说的。我投你一票。另一个解决方案是删除跨度，这是不必要的。你比我早8秒得到答案，所以删除我的答案；）@AaronLavers总是发生在我身上我不知道这件事。。直到谢谢：）谢谢你！我添加跨距的唯一原因是，我可以相对于文本而不是整个按钮定位箭头。