我有一个想要在点击时更改的图像元素。
<img id="btnLeft">
这有效：
#btnLeft:hover {
width:70px;
height:74px;
}
但是我需要的是：
#btnLeft:onclick {
width:70px;
height:74px;
}
但是，这显然不起作用。onclickCSS 根本有可能有行为（即不使用JavaScript）吗？
我可以在CSS中产生onclick效果吗？
第2721篇《我可以在CSS中产生onclick效果吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共9个回答
我遇到了一个问题，该元素在悬停时必须变为红色，在悬停时必须单击时变为蓝色。要使用CSS实现此目的，您需要例如：
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>
我努力了一段时间，直到发现CSS选择器的顺序是我遇到的问题。问题是我切换了位置并且活动的选择器不起作用。然后我发现:hover先走再走:active。
我有以下用于鼠标悬停和鼠标单击的代码，它可以正常工作：
//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;
}
How about a pure CSS solution without being (that) hacky?
.page {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #121519;
color: whitesmoke;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.arrow {
cursor: pointer;
transition: filter 0.3s ease 0.3s;
}
.arrow:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}<body class="page">
<div class="controls">
<div class="arrow">
<img src="https://i.imgur.com/JGUoNfS.png" />
</div>
</div>
</body>@TylerH has a great response but its a pretty complex solution. I have a solution for those of you that just want a simple "onclick" effect with pure css without a bunch of extra elements.
We will simply use css transitions. You could probably do similar with animations.
The trick is to change the delay for the transition so that it will last when the user clicks.
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}
Here I add the "clicked" class as well so that javascript can also provide the effect if it needs to. I use 0px drop-shadow filter because it will highlight the given transparent graphic blue this way for my case.
I have a filter at 0s here so that it wont take effect. When the effect is released I can then add the transition with a delay so that it will provide a nice "clicked" effect.
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}
This allows me to set it up so that when the user clicks the button, it highlights blue then fades out slowly (you could, of course, use other effects as well).
While you are limited here in the sense that the animation to highlight is instant, it does still provide the desired effect. You could likely use this trick with animation to produce a smoother overall transition.
编辑：在OP澄清他想要什么之前回答。以下是类似于Javascript onclick的onclick，而不是:active伪类。
这只能通过Javascript或Checkbox Hack来实现
复选框hack本质上使您可以单击标签，从而“选中”复选框，从而使您可以根据需要设置标签的样式。
该演示
如果为元素指定a，tabindex则可以使用:focus伪类来模拟点击。
的HTML
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />
的CSS
#btnLeft:focus{
width:70px;
height:74px;
}
TylerH的回答非常好，我只需要对最后一个按钮版本进行更新即可。
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 30px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:30px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>您可以使用伪类:target来模仿点击事件，下面举一个例子。
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>外观如下：http : //jsfiddle.net/TYhnb/
需要注意的一点是，这仅限于超链接，因此，如果您需要在超链接之外的其他应用程序（例如按钮）上使用它，则可能需要对其稍加修改，例如将超链接样式化为按钮。
最接近的是:active：
#btnLeft:active {
width: 70px;
height: 74px;
}
但是，这仅在按住鼠标按钮时才适用。应用样式并使之保持 onclick 的唯一方法是使用一些JavaScript。
相似问题
问题类别
你可以使用：target
一般目标
或按类别名称过滤
或按ID名称过滤