css - 在 :active psuedo-class 之后禁用/删除 css3 转换

Question

所以我有一个典型的场景:使用 :hover 伪类将按钮样式设置为在悬停时转换其颜色。
该按钮还有一个 :active 触发类，以便在单击时再次改变颜色；但这次我不想要过渡，所以这个类禁用了所有过渡(我希望更改快速)。

我遇到的问题是，虽然这适用于单击的 mousedown 部分，但它不适用于 mouseup 部分，因为一旦释放鼠标按钮，:active 状态就不再存在，这会导致转换(是按钮类定义的一部分)应用。

有没有一种方法可以让悬停在/悬停时应用带有过渡的更改，但单击向下/向上不会？
我可能可以重做 jQuery 中的行为；但理想情况下，我想在不借助 JavaScript 的情况下实现这一目标。

一个工作示例是 here .

谢谢。

Answer 1

你可以用一个技巧来做到这一点

例如，你可以改变颜色，不是用背景，而是用阴影:

button:active {
    -webkit-box-shadow: inset 0 0 100px green;
}

那么，唯一剩下的改变就是将过渡限制为背景色，而不是全部

button {
    transition: background-color 1s;
}

不是你真正想要的，但尽可能接近:-)