我有一个图像元素，我想在点击时改变它。
<img id="btnLeft">
如此:
#btnLeft:hover {
width: 70px;
height: 74px;
}
但我需要的是:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
但是，很明显，这是行不通的。是否有可能在CSS中有onclick行为(即，不使用JavaScript)?
当前回答
你能得到的最接近的是:active:
#btnLeft:active {
width: 70px;
height: 74px;
}
但是，这只会在按住鼠标按钮时应用样式。应用样式并保持它在click上应用的唯一方法是使用一点JavaScript。
其他回答
你可以使用:target。
或者通过类名过滤，使用.classname:target。
或者使用#idname:target过滤id名。
#id01:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .msg { display: none; } .close { color: white; width: 2rem; height: 2rem; background-color: black; text-align: center; margin: 20px; } <a href="#id01">Open</a> <div id="id01" class="msg"> <a href="" class="close">×</a> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div>
我有以下代码的鼠标悬停和鼠标点击，它的工作:
//For Mouse Hover
.thumbnail:hover span{ /* CSS for enlarged image */
visibility: visible;
text-align: center;
vertical-align: middle;
height: 70%;
width: 80%;
top: auto;
left: 10%;
}
当你点击图像时，这段代码会隐藏图像:
.thumbnail:active span {
visibility: hidden;
}
根据您想要做的事情，让焦点保持变化可能是一种选择?
<button></button>
<style>
button {
width: 140px;
height: 70px;
background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
background-size: cover;
}
button:focus {
width: 240px;
height: 120px;
}
</style>
https://jsfiddle.net/anm92d0r/
注意，这对image标签不起作用。但根据你的元素id，我假设你在寻找按钮功能。
首先我将使用焦点
这样做的原因是它很适合我所展示的例子。如果有人想要鼠标按下类型事件，那么使用active。
HTML代码:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>
CSS代码
/* Change *button size, border, bg color, and align to middle* */
.mdT {
width: 96px;
height: 96px;
border: 0px;
outline: 0;
vertical-align: middle;
background-color: #AAAAAA;
}
.mdT:focus {
width: 256px;
height: 256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image: url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+4'); }
jsfiddle.net/00wwkjux/
OP只希望在单击事件期间效果持续。虽然这并不完全满足这种需求，但已经很接近了。active会在鼠标放下时进行动画，任何需要持续更长时间的更改都需要使用JavaScript来完成。
我有一个问题的元素，必须是红色的悬停和蓝色的点击，而悬停。要用CSS实现这一点，你需要例如:
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>
我挣扎了一段时间，直到我发现CSS选择器的顺序是我所遇到的问题。问题是我换了位置，主动选择器不工作了。然后我发现:hover先去，然后:active。
