2

所以我有一个典型的场景：当鼠标悬停在 :hover psuedo-class 时，按钮的样式会转换它的颜色。
该按钮还有一个 :active 触发类，以便在单击时再次更改颜色；但是这一次我不想要一个过渡，所以这个类禁用了所有的过渡（我希望改变是活泼的）。

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

有没有办法让它工作，这样悬停/悬停应用带有过渡的更改，但单击向下/向上不？
我可能可以重做 jQuery 中的行为；但理想情况下，我想在不诉诸 JavaScript 的情况下实现这一目标。

一个工作示例是here。

谢谢。

4

3 回答 3

1

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

例如，您可以更改颜色，而不是使用背景，而是使用阴影：

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

然后，您唯一剩下的更改是将过渡限制为背景颜色，而不是全部

button {
    transition: background-color 1s;
}

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

于 2013-02-11T22:02:49.830 回答
1

我认为您想要做的是使用: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 确实保持按钮的活动状态，并且可能存在错误。

于 2014-06-24T05:25:11.130 回答
0

这可以通过向活动按钮状态和基本按钮状态添加不同的转换来仅使用 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;
}
于 2013-03-27T07:42:49.140 回答