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

2023年6月1日 238次阅读

我试图基于三种状态(默认,悬停,活动)制作具有不同背景颜色(浅绿色,绿色,深绿色)的按钮,并以这种方式在状态之间转换：

当用户：

>将鼠标悬停在按钮上(默认 – >悬停),它应立即从浅绿色转换为绿色.
>点击按钮(悬停 – >活动),它应立即从绿色过渡到深绿色.
>释放点击(活动 – >悬停),它应该从深绿色渐变为绿色.
>’unhovers’,(悬停 – >默认),它应该从绿色淡化到浅绿色.

我能够做到的唯一方法是使用JavaScript,这并不理想.根据我的理解,这可能是不可能的,因为我只能为悬停定义一个转换,这适用于默认值 – >悬停并点击 – >徘徊.我想要的是能够从默认转换 – >悬停为0s / none,以及点击的转换 – >悬停是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>

最佳答案 这是一个疯狂的想法.在背景颜色和背景图像之间交替.这适用于Chrome&苹果浏览器. 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>
点赞