如何在三种不同的状态中实现不同的转换

Question

我正试图根据三种状态（默认、悬停、活动）制作一个具有不同背景颜色（浅绿色、绿色、深绿色）的按钮，并以这种方式在状态之间转换：

当用户：

• 悬停在按钮上（默认->悬停），它应该立即从浅绿色过渡到绿色
• 点击按钮（悬停->活动），它应该立即从绿色过渡到深绿色
• 释放点击（活动->悬停），它应该从深绿色渐变为绿色
• "unvers"，（悬停->默认），它应该从绿色渐变为浅绿色

我能做到这一点的唯一方法是使用JavaScript，这并不理想。据我所知，这可能是不可能的，因为我只能为悬停定义一个转换，默认的->悬停和单击的->悬停都会发生这种情况。我想要的是能够让从默认->悬停的转换为0s/none，而从点击->悬停的过渡为1s/什么。这在不使用JavaScript的情况下可能吗？

以下是我迄今为止尝试过的两个片段。第一个在单击时表现出所需的行为，而第二个在悬停时表现出。

button {
  height: 100px; width: 400px;
  border: none; outline: none;
  background-color: lightgreen;
  transition: 1s;
}
/* unwanted fade going from default -> hover */
button:hover {
  background-color: green;
  transition: 1s;
}
button:active {
  background-color: darkgreen;
  transition: 0s;
}

<button></button>

button {
  height: 100px;
  width: 400px;
  outline: none;
  border: none;
  
  background-color: lightgreen;
  transition: 1s;
}
button:hover {
  background-color: green;
  transition: 0s;
}
/* wanted but missing fade when going from active -> hover */
button:active {
  background-color: darkgreen;
  transition: 0s;
}

<button></button>

Answer 1

这里有一个疯狂的想法。在背景色和背景图像之间交替。这在Chrome&Safari。Firefox尚未实现背景图像转换。

button {
  height: 100px;
  width: 400px;
  outline: none;
  border: none;
  
  background-color: lightgreen;
  transition: background-color 1s;
}
button:hover {
  background-color: green;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAIAAABRDCAKAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYaBya+xvUAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABNJREFUCNdjZGhgwA+YGBiGjQoAfXAAjqFknA0AAAAASUVORK5CYII=');
  transition: background-image 1s;
}
button:active {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAIAAABGj2DjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MEhYUHtxWQ7sAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABhJREFUKM9jZEhhIBUwMTCM6hnVM6j1AABGTwCARo/YOwAAAABJRU5ErkJggg==');
  transition: 0s;
}

<button></button>