HTML/CSS 过渡适用于悬停，但不适用于在 chrome 上悬停答案

【问题标题】：HTML/CSS Transition works for hover in but not for hover out on chromeHTML/CSS 过渡适用于悬停，但不适用于在 chrome 上悬停
【发布时间】：2021-08-08 20:34:10
【问题描述】：

我有以下代码：

button {
  transition: all 3s;
}

button:link,
button:visited {
  background-color: #51cf66;
}

button:hover,
button:active {
  background-color: #000;
}

<div>
  <h1>Hi there</h1>
  <button>push me</button>
</div>

此代码在 Firefox 上按预期工作。当我悬停或悬停时，我可以看到按钮上发生的过渡。

在 chrome 上，动画仅在我悬停时发生。当我悬停时，按钮立即恢复其原始颜色。

你们知道我做错了什么吗？我该怎么做才能确保悬停动画在 chrome 和 firefox 上以同样的方式工作？

谢谢。

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

当按钮处于默认状态时，您需要指定您想要的颜色/背景颜色

background-color: #51cf66;

将此添加到button 下的样式中修复了该问题。

button {
  transition: all 3s ease;
  background-color: #51cf66;
}

button:link,
button:visited {
  background-color: #51cf66;
}

button:hover,
button:active {
  background-color: #000;
  color: #fff;
}

<div>
  <h1>Hi there</h1>
  <button>push me</button>
</div>

【讨论】：

【解决方案2】：

这是因为您没有指定按钮的背景颜色。因此，当您的鼠标离开按钮时，它会立即恢复到默认状态。因此，在按钮上设置 background-color 属性将解决您的问题

【讨论】：