鼠标按下时的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2725458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS on Mouse Down
提问by theorise
Usually I would use :hover, but I want my website to be accessible on touchscreen media too.
通常我会使用 :hover，但我希望我的网站也可以在触摸屏媒体上访问。
I know I can use :active, but as soon as I let go of the mouse button, it goes back to its inactive state.
我知道我可以使用 :active，但是一旦我松开鼠标按钮，它就会回到非活动状态。
Effectively I want:
实际上我想要：
Mouse Down : Div goes green
Mouse Up: Div stays green
Mouse Down: Div goes red
Mouse Up: Div stays red
鼠标按下：Div 变为绿色
鼠标向上：Div 保持绿色
鼠标按下：Div 变红
鼠标向上：Div 保持红色
Instead of:
代替：
Mouse Down: Div goes green
Mouse Up: Div goes red
鼠标按下：Div 变为绿色
鼠标向上：Div 变红
采纳答案by zzzzBov
Here is how to do a pure css toggle 'button' (CSS3 required):
以下是如何执行纯 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>Of course, as always, IE fails at CSS (can't figure out the :checkedpseudo-class), so you're probably better off just using JavaScript.
当然，与往常一样，IE 在 CSS 上失败（无法弄清楚:checked伪类），因此您最好只使用 JavaScript。
回答by Jordan Feldstein
Without relying on jQuery:
不依赖 jQuery：
The :activepseudo-class is used to apply css to elements while they're being clicked upon.
该:active伪类用于会在用户点击，而他们申请的CSS元素。
.button {
color: red;
}
.button:active {
color: green;
}
回答by racerror
Use jQuery.
使用 jQuery。
$(function(){
$('#yo-content').click(function() {
$(this).toggleClass('make-me-green');
});
});
CSS:
CSS：
#yo-content {
background-color: #ff0000;
cursor: pointer;
}
.make-me-green {
background-color: #33ff00 !important;
}
HTML:
HTML：
<div id="yo-content">Feel free to click</div>
回答by Alain BECKER
To my knowledge, there is no pure-CSS way of achieving what you effectively want.
据我所知，没有纯 CSS 方法可以有效地实现您想要的。
But jQuery could come handy there...
但是 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
});
Instead of setting css properties, you could set/add/remove classnames if you'd like the presentational aspects to stay as CSS-centric as possible (which is a decent perspective).
如果您希望展示方面尽可能以 CSS 为中心（这是一个不错的观点），您可以设置/添加/删除类名，而不是设置 css 属性。
回答by Elias
Change class when object is clicked
单击对象时更改类
var classes = [
"myClass1",
"myClass2"
];
var i = 0;
function classChange(e) {
e.setAttribute("class", classes[i]);
i = i == 0 ? i = 1 : i = 0;
}
If you want it to change on mousedown and mouse up directly use:
如果您希望它在 mousedown 和 mouse up 上直接更改，请使用：
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)");
}
HTML AND CSS is alsomt the same for both JavaScrirpt codes
HTML 和 CSS 对于两个 JavaScript 代码也是相同的
Pure CSS3
纯 CSS3
.mousedown,
.myClass1 {
background: #0a0;
}
.mouseup,
.myClass2 {
background: #a00;
}
Pure HTML5
纯 HTML5
//onclick="classChange(this)"
//class="onmousechange"
<div>
<p>paragraph</p>
</div>
I'm too lazy to write any info.
我懒得写任何信息。
