Question

所以我有一个典型的场景：一个按钮样式，当使用：hover psuedo-class盘旋时，它会转换颜色。
该按钮还有一个：主动触发类，以便在单击时再次更改颜色;但是这次我不想要转换，所以这个类禁用了所有转换（我希望更改是快速的）。

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

有没有办法让这个工作，使悬停在/出来应用转换的变化，但点击向上/向上不？我可以重做jQuery中的行为;但理想情况下，我想在不使用JavaScript的情况下实现这一目标。

一个工作示例是here。

感谢。

Answer 1

你可以用技巧

来做到这一点例如，您可以更改颜色，而不是背景，但使用阴影：

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

然后，唯一剩下的变化就是限制转换为背景颜色，而不是全部

button {
    transition: background-color 1s;
}

不是你想要的，但尽可能接近： - ）

Answer 2

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

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

以下是一些示例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伪来保持您的绿色状态＆＃39;活性：

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确实保持按钮的活动状态，并且可能存在错误。

禁用/删除css3转换后：active pseudo-class

3 个答案: