Question

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

当用户：

悬停在按钮上（默认 - ＆gt;悬停），它应立即从浅绿色转换为绿色。
点击按钮（悬停 - ＆gt;有效），它应立即从绿色过渡到深绿色。
释放点击（有效 - ＆gt;悬停），它应该从深绿色渐变为绿色。
'unhovers'，（悬停 - >默认），它应该从绿色淡化为浅绿色。

我能够做到的唯一方法是使用JavaScript，这并不理想。根据我的理解，这可能是不可能的，因为我只能为悬停定义一个转换，这适用于默认值 - ＆gt;悬停并点击 - ＆gt;徘徊。我想要的是能够从默认转换 - ＆gt;悬停为0s / none，以及点击的转换 - ＆gt;悬停是1 /秒。这可能不使用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＆amp;苹果浏览器。 Firefox尚未实现背景图像转换。

＆＃13;

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;
}

＆＃13;

<button></button>

＆＃13;

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

1 个答案: