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 pseudo-class），所以你最好只使用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>

Answer 4

据我所知，没有纯粹的CSS方式来实现你真正想要的东西。

但是jQuery可以派上用场......

 // let's suppose your div's (on page load) initial state is red (#F00), 
 // and this flag will stand for it
 var initialState = true; // setup a global state flag
 $("#foo").mousedown( function() { // on mousedown
   $(this).css("background-color", intialState ? "#0F0" : "#F00"); // toggle bgColor
   initialState = !initialState; // toggle flag
 });

如果你希望表达方面尽可能保持以CSS为中心（这是一个不错的观点），你可以设置/添加/删除类名，而不是设置css属性。

Answer 5

单击对象时更改类

var classes = [
    "myClass1",
    "myClass2"
];
var i = 0;
function classChange(e) {
    e.setAttribute("class", classes[i]);
    i = i == 0 ? i = 1 : i = 0;
}

如果要在鼠标按下和鼠标向上移动时进行更改，请直接使用：

function mouseDown(e) {
    e.classList.remove("mouseup");
    e.classList.remove("mousedown");
    if (e.hasAttribute("class")) {
        e.setAttribute("class", e.getAttribute("class") + " mousedown");
    } else {
        e.setAttribute("class", "mousedown");
    }
}

function mouseUp(e) {
    e.classList.remove("mouseup");
    e.classList.remove("mousedown");
    if (e.hasAttribute("class")) {
        e.setAttribute("class", e.getAttribute("class") + " mouseup");
    } else {
        e.setAttribute("class", "mousedown");
    }
}

//you change selector if you want another class name
var selector = document.getElementsByClassName("onmousechange");
for (var i = 0; i <= selector.length; i++) {
    selector[i].setAttribute("onmouseup", "mouseUp(this)");
    selector[i].setAttribute("onmousedown", "mouseDown(this)");
}

两个JavaScrirpt代码的HTML AND CSS也相同

纯CSS3

.mousedown,
.myClass1 {
    background: #0a0;
}

.mouseup,
.myClass2 {
    background: #a00;
}

纯HTML5

//onclick="classChange(this)"
//class="onmousechange"
<div>
    <p>paragraph</p>
</div>

我懒得写任何信息。

鼠标按下的CSS

5 个答案: