Question

我正在为客户创建菜单，并且在两个锚点元素上获得了这样的悬停效果：

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); transform: scale(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);
  }
}

Answer 2

当然，这是由font-weight引起的。当您执行:hover时，链接将立即更改为其他font-weight，为此，没有transition的影响，很幸运。

悬停比例尺上的元素被推动

2 个答案: