CSS下鼠标 [英] CSS on Mouse Down

问题描述

通常我会使用：hover，但我希望我的网站也可以在触摸屏介质上访问。

Usually I would use :hover, but I want my website to be accessible on touchscreen media too.

我知道我可以使用：active，

I know I can use :active, but as soon as I let go of the mouse button, it goes back to its inactive state.

有效我想要：

鼠标向下：Div变为绿色

Mouse Down : Div goes green

鼠标向上：Div保持绿色

Mouse Up: Div stays green

鼠标向下：Div变为红色

Mouse Down: Div goes red

鼠标向上：Div保持红色

Mouse Up: Div stays red

鼠标向下：Div变为绿色

Mouse Down: Div goes green

鼠标向上：Div红色

推荐答案

这里是如何做一个纯CSS切换按钮：

Here is how to do a pure css toggle 'button' (CSS3 required):

.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。

Of course, as always, IE fails at CSS (can't figure out the :checked pseudo-class), so you're probably better off just using JavaScript.

这篇关于CSS下鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！