我可以在CSS中使用onclick效果吗？

本文翻译自：Can I have an onclick effect in CSS?

I have an image element that I want to change on click. 我有一个想要在点击时更改的图像元素。

<img id="btnLeft">

This works: 这有效：

#btnLeft:hover {
    width:70px;
    height:74px;
}

But what I need is: 但我需要的是：

#btnLeft:onclick {
    width:70px;
    height:74px;
}

But, it doesn't work, obviously. 但是，它显然不起作用。 Is it possible at all to have onclick behavior in CSS (ie without using JavaScript)? 是否有可能在CSS中具有onclick行为（即不使用JavaScript）？

---

#1楼

参考：https://stackoom.com/question/vBqP/我可以在CSS中使用onclick效果吗

---

#2楼

The closest you'll get is :active : 你最接近的是:active ：

#btnLeft:active {
    width: 70px;
    height: 74px;
}

However this will only apply the style when the mouse button is held down. 但是，这只会在按住鼠标按钮时应用样式。 The only way to apply a style and keep it applied onclick is to use a bit of JavaScript. 应用样式并将其应用于 onclick的唯一方法是使用一些JavaScript。

---

#3楼

Edit: Answered before OP clarified what he wanted. 编辑：在OP澄清他想要的之前回答。 The following is for an onclick similar to javascripts onclick, not the :active pseudo class. 以下是类似于javascripts onclick的onclick，而不是:active伪类。

This can only be achieved with either Javascript or the Checkbox Hack 这只能通过Javascript或Checkbox Hack实现

The checkbox hack essentially gets you to click on a label, that "checks" a checkbox, allowing you to style the label as you wish. 复选框hack基本上让你点击一个标签，“勾选”一个复选框，允许你按照自己的意愿设置标签的样式。

The demo 演示

---

#4楼

You can use pseudo class :target to mimic on click event, let me give you an example. 你可以使用伪类:target来模仿click事件，让我举个例子。

 #something { display: none; } #something:target { display: block; } 

 <a href="#something">Show</a> <div id="something">Bingo!</div> 

Here's how it looks like: http://jsfiddle.net/TYhnb/ 这是它的样子： http ： //jsfiddle.net/TYhnb/

One thing to note, this is only limited to hyperlink, so if you need to use on other than hyperlink, such as a button, you might want to hack it a little bit, such as styling a hyperlink to look like a button. 有一点需要注意，这仅限于超链接，因此如果您需要使用非超链接（例如按钮），您可能需要稍微破解它，例如将超链接样式化为按钮。

---

#5楼

If you give the element a tabindex then you can use the :focus pseudo class to simulate a click. 如果为元素指定tabindex则可以使用:focus伪类来模拟单击。

HTML HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

CSS CSS

#btnLeft:focus{
    width:70px;
    height:74px;
}

http://jsfiddle.net/NaTj5/ http://jsfiddle.net/NaTj5/

---

#6楼

Okay, this maybe an old post... but was first result in google and decided to make your own mix on this as.. 好吧，这可能是一个老帖子...但是谷歌的第一个结果，并决定自己组成这个...

FIRSTLY I WILL USE FOCUS 我将首先使用焦点

The reason for this is that it works nicely for the example i'm showing, if someone wants a mouse down type event then use active 这样做的原因是它适用于我正在显示的示例，如果有人想要鼠标按下类型事件然后使用活动

THE HTML CODE: HTML代码：

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

THE CSS CODE: 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');   }

JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/ JS FIDDLE LINK： http ： //jsfiddle.net/00wwkjux/

So why am i posting this in an old thread, well because the examples here vary and i thought to provide one back to the community which is a working example. 那么为什么我在一个旧的帖子中发布这个，好吧因为这里的例子各不相同，我想提供一个回到社区，这是一个工作的例子。

As already answered by the thread creator, they only want the effect to last during the click event. 正如线程创建者已经回答的那样，他们只希望效果在点击事件期间持续。 Now while this is not exact for that need, its close. 现在虽然这不是那种需要，但它已经接近了。 active will animate while the mouse is down and any changes that you need to have last longer need to be done with javascript. 当鼠标停止时，激活将生成动画，并且您需要持续更长时间的任何更改都需要使用javascript完成。