为什么悬停变换比例这么差？ [复制]答案

【问题标题】：Why does the hover transform scale is so bad? [duplicate]为什么悬停变换比例这么差？ [复制]
【发布时间】：2022-02-11 05:42:36
【问题描述】：

我有这个代码使用悬停，当我使用它时一切正常，当我移除鼠标时，元素返回得如此之快，它使它看起来不合适。

.cmd-1:hover {
  transform: scale(1.1);
  transition: 0.7s;
  color: gold;
  transition: all 0.7s ease-in-out;
}

【问题讨论】：

转换需要在 .cmd-1 类上，而不仅仅是悬停状态
正如@dantheman 所说，转换仅适用于 .cmd-1 标签的 onver 状态。对于悬停和取消悬停转换，您必须将转换设置为基本样式，即.cmd-1 { transition: all .7s ease-in-out; }

标签： html css

【解决方案1】：

问题在于，一旦用户将鼠标移开，元素就会失去其 :hover 状态，并随之失去您设置的过渡。

所以，把这个过渡放在没有悬停的元素上。当元素悬停时它也会被继承，因此两个方向都会缓和到新的大小。

.cmd-1 {
  transition: all 0.7s ease-in-out;
}

.cmd-1:hover {
  transform: scale(1.1);
  transition: 0.7s;
  color: gold;
}

<div class="cmd-1">HELLO
</div>.

【讨论】：