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

Question

所以我有一个典型的场景：当使用：hover psuedo类悬停时，一个按钮的样式可以转换其颜色
该按钮还有一个：活动触发类，因此当点击时它会再次改变颜色；但这次我不想要转换，所以这个类禁用了所有转换（我希望更改很快）。

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

有没有一种方法可以实现这一点，即悬停在内/外应用带有转换的更改，而单击向下/向上则没有
我可能可以在jQuery中重做这些行为；但理想情况下，我希望在不使用JavaScript的情况下实现这一点。

下面是一个工作示例。

谢谢。

Answer 1

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

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

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

然后，剩下的唯一变化是将转换限制为背景色，而不是所有的

button {
    transition: background-color 1s;
}

不是你想要的，但尽我所能：-）

Answer 2

这可以通过在活动按钮状态和基本按钮状态中添加不同的转换，仅使用CSS来完成。

• 向基本按钮添加none的转换，这意味着向基本状态的转换将是即时的
• 然后，将所需的转换添加到按钮中，这意味着转换到活动状态（鼠标向下）需要时间

下面是一些CSS示例：http://codepen.io/anon/pen/hEmbl

button {
  background:#009;
  color:#fff;
  padding:1em;
  border:0;
  border-radius:4px;
  -webkit-transition:none;
}
button:active {
  background:#090;
  -webkit-transition:all 1s;
}

Answer 3

我认为您想要做的是使用:focus伪码来保持您的绿色"状态"处于活动状态：

button:active, button:focus {
  transition: none;
  box-shadow: inset 0 0 100px green;
  /*background-color: #00f;*/
}

http://codepen.io/anon/pen/tgJcf

注意：在撰写本文时，这适用于IE11和最新的Webkit/Blink版本，但不适用于Firefox。Firefox确实保持了按钮的活动状态，并且可能在那里被窃听了。