css 按钮背景颜色在过渡延迟中显示另一种颜色

Question

我正在尝试在悬停时按钮背景颜色转换。我观察到当我将鼠标悬停在按钮上时，它会在延迟时间内显示不同的颜色。

下面是代码。

.button {
  background-color: aqua;
  transition: background-color 1s ease 0.5s;
  width: 500px;
  height: 500px;
  font-size: 24pt;
}

.button:hover {
  background-color: blue;
}

.button:active {
  background-color: rgb(216, 36, 4);
}

<button type="button" class="button">button</button>

如果去掉延迟时间，悬停或select时也会观察到闪烁效果。

这是有关其行为方式的视频。 https://youtu.be/O0q-SK-eejk

请帮我解决一下，不要在延迟时间显示不同的颜色。

Answer 1

您看到灰色的原因是浏览器为背景添加的默认样式属性。试试下面的代码。

.button {
  background: inherit;
  background-color: aqua;
  transition: background-color 1s ease 0.5s;
  width: 500px;
  height: 500px;
  font-size: 24pt;
}

.button:hover {
  background: inherit;
  background-color: blue;
}

.button:active {
  background-color: rgb(216, 36, 4);
}

<button type="button" class="button">button</button>

css 按钮背景颜色在过渡延迟中显示另一种颜色

css button background colour showing another colour in delay in transition

css

css-transitions