鼠标按下的CSS

Question

通常我会使用:悬停,但我希望我的网站也可以在触摸屏媒体上访问.

我知道我可以使用:active,但是一旦我松开鼠标按钮,它就会回到无效状态.

我希望有效:

鼠标向下:Div变为绿色

鼠标向上:Div保持绿色

鼠标向下:Div变红

鼠标向上:Div保持红色

代替:

鼠标向下:Div变为绿色

鼠标向上:Div变红

Answer 1

不依赖于jQuery:

该:active伪类用于会在用户点击,而他们申请的CSS元素.

.button {
  color: red;
}
.button:active {
  color: green;
}

Answer 2

以下是如何进行纯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伪类),所以你最好只使用JavaScript.

Answer 3

使用jQuery.

$(function(){
    $('#yo-content').click(function() { 
        $(this).toggleClass('make-me-green');
    });
});

CSS:

#yo-content { 
    background-color: #ff0000;
    cursor: pointer;
}

.make-me-green { 
    background-color: #33ff00 !important;
}

HTML:

<div id="yo-content">Feel free to click</div>