考虑先前激活的伪 class? 进行双向转换声明或转换。

Question

我真正想要的是制作一个按钮，该按钮在鼠标悬停时逐渐变为另一种颜色，但在单击时立即改变颜色。换句话说，当鼠标进入或离开时，颜色会缓慢变化，但当用户按下或释放鼠标按钮时，颜色会突然变化。

问题是我无法将两者分开。这是我尝试过的：

<html>
  <head>
    <style>
      button {
        width:  40vw;
        height: 20vw;
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid gray;
        border-radius: 0;
        cursor: pointer;
        transition-duration: 0.7s;
      }
      button:hover {
        background-color: lightgray;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
    </style>
  </head>
  <body>
    <button>
      Click here
    </button>
  </body>
</html>

遗憾的是，button:active 规则中的 transition-duration 属性只会影响一种方式的转换，不会影响另一种方式。按下点击时过渡持续 0 秒，但释放时持续 0.7 秒。

原因是它实际上是向button:hover的过渡。但是我不能在button:hover规则中加上transition-duration: 0s，因为我还是希望鼠标进入按钮时过渡平滑。而且我无法区分前一个选择器是 button 的情况和它是 button:active.

的情况

我可以使用 JavaScript 事件，但这个问题似乎很基本，只有 css 的解决方案。

编辑： 我几乎用下面的代码绕过了它，如果你在第一次点击后没有再次输入按钮，它会完美地工作。由于它仍然是焦点，所以这次转换是立即的。

      button:hover {
        background-color: lightgray;
      }
      button:focus {
        background-color: lightgray;
        transition-duration: 0s;
      }
      button:active {
        background-color: darkgray;
        transition-duration: 0s;
      }
      button:not(:hover) {
        background-color: #efefef;
        transition-duration: 0.7s;
      }

Answer 1

不要使用相同的属性，你可以做到。使用 background-image 和渐变使颜色处于活动状态并且不会触发转换

button {
  width: 40vw;
  height: 20vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid gray;
  border-radius: 0;
  cursor: pointer;
  transition-duration: 0.7s;
}

button:hover {
  background-color: lightgray;
}

button:active {
  background-image: linear-gradient(darkgray 0 0);
}

<button>Click here</button>

考虑先前激活的伪 class? 进行双向转换声明或转换。

Make two-way transition declarations or transitions that take into account the previously active pseudo-class?

css

css-selectors

css-transforms

pseudo-class