css - 悬停比例元素被推

Question

我正在为客户创建一个菜单，我在两个 anchor 元素上得到了这样的悬停效果:

a {
  margin: 0 2.5%;
  transition: transform .5s;
  text-align: center;
  font-weight: 500;

  &:hover,
  &:active {
    font-weight: 600;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

这很好用，但是当我将鼠标悬停在链接上时，它旁边的链接会被推一点。我认为这是因为比例尺将边距或宽度放大，但似乎无法弄清楚如何正确地做到这一点。

编辑

我换了-webkit-transform: scale(1.2);
变换:比例(1.2)；到-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); 成功了，谢谢大家!

Answer 1

尝试使用它，你就完成了...

a {
  margin: 0 2.5%;
  transition: transform .5s;
  text-align: center;
  font-weight: 500;

  &:hover,
  &:active {
    font-weight: 600;
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
}