css - 鼠标按下时的CSS

通常我会使用:hover，但是我也希望我的网站也可以在触摸屏媒体上访问。
我知道我可以使用:active，但是一旦我放开鼠标按钮，它就会回到其非 Activity 状态。
实际上，我想要:

代替:

最佳答案

以下是执行纯CSS切换“按钮”(需要CSS3)的方法:

.toggle-button
{
  background-color: #FF0000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.toggle-box:checked + .toggle-button
{
  background-color: #00FF00;
}

<input type="checkbox" class="toggle-box" id="toggle-1" />
<label for="toggle-1" class="toggle-button">Click Me</label>

当然，与往常一样，IE在CSS上失败(无法找出 :checked pseudo-class)，因此，最好只使用JavaScript。

关于css - 鼠标按下时的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2725458/