CSS：为什么悬停动画在悬停停止时停止？

【问题标题】：CSS: Why do on hover animations stop when hovering ceases?CSS：为什么悬停动画在悬停停止时停止？
【发布时间】：2021-03-16 00:44:33
【问题描述】：

采用下面的 CSS

.button {
  width: 100px;
  height: 100px;
  transition: transform .7s ease-out;
}

.button:hover {
  transform: scaleX(5);
  transition: all 5s;
}

这是在悬停时触发的，但是当鼠标离开按钮时，div 会恢复到原来的状态。

这是为什么？

【问题讨论】：

因为您不再将鼠标悬停在元素上

标签： html css css-animations

【解决方案1】：

这些由 :hover 选择器指定的 CSS 样式仅在鼠标当前悬停在元素上时应用。一旦你取消悬停，这些 CSS 样式就会被停用

基本上，鼠标悬停时的 CSS 如下所示：

width: 100px;
height: 100px;
transform: scaleX(5);

当您的鼠标没有悬停时，您的 CSS 将如下所示：

width: 100px;
height: 100px;

而您的过渡样式可帮助您在这两种状态之间顺利过渡

【讨论】：

谢谢，有道理，

【解决方案2】：

您可以考虑在 mouseout 上进行较大延迟以保持悬停状态：

.button {
  width: 100px;
  height: 100px;
  transition-delay: 5000s;
  background:blue;
}

.button:hover {
  transform: scaleX(5);
  transition: transform .7s ease-out 0s;
}

&lt;div class="button"&gt;&lt;/div&gt;

【讨论】：