寻找一种制作悬停动画的方法，该动画可立即更改颜色，但缓慢返回到旧颜色

Question

我之前见过的示例：https://steamtimeidler.com/

查看当您将鼠标悬停在按钮上时，它会立即更改颜色，但是当您将光标移开时，它会逐渐淡入旧颜色

我不知道该怎么做，有人知道吗？

Answer 1

CSS onomouseout：

div:not( :hover ){ transition }

CSS onmouseover：

div:hover{ color }

Answer 2

您可以在自身的：hover选择器上使用：not选择器，因此只有在已经将元素悬停之后，才开始应用过渡规则

CSS

button {
  padding: 10px 20px;
  background: #9ccc65;
  border:none;
}
button:not( :hover ) {
  transition: all 1s linear;
}
button:hover {
  background: #fbc02d;
}

和HTML

<button>Hi There</button>

和一个可行的例子 https://codepen.io/Teobis/pen/jKzwVj