通常我会使用:hover,但我想我的网站也可以在触摸屏媒体上访问。
我知道我可以使用:活动,但一旦我放开鼠标按钮,它就回到其无效状态。
有效我想:
Mouse Down : Div goes green
Mouse Up: Div stays green
Mouse Down: Div goes red
Mouse Up: Div stays red
代替:
Mouse Down: Div goes green
Mouse Up: Div goes red
解决方法
这里是如何做一个纯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。