CSS下鼠标

前端之家收集整理的这篇文章主要介绍了CSS下鼠标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
通常我会使用: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。

猜你在找的CSS相关文章