我可以在CSS中使用onclick效果吗？
我有一个图像元素，我想单击更改。
<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; }
但是，这只会在按住鼠标button时应用样式。 应用样式并将其应用于 onclick的唯一方法是使用一些JavaScript。
2017答：
最好的方法（实际上是唯一的方法*）只使用CSS来模拟一个实际的点击事件（而不是仅仅停留在一个元素上或使一个元素处于活动状态，而没有mouseUp ），那就是使用checkboxhack。 它通过将label附加到<input type="checkbox">元素，通过标签的for=""属性进行工作。
此function具有广泛的浏览器支持 （ :checked伪类是IE9 +）。
将相同的值应用于<input>的ID属性和<label>属性的<label>属性，并且可以告诉浏览器使用:checked伪类点击标签，谢谢点击一个标签将检查并取消选中“关联” <input type="checkbox"> 。
*您可以通过IE7 +中的:active或:focus伪类来模拟“selected”事件（例如，对于通常宽度为50px的button，可以在active更改其宽度： #btnControl:active { width: 75px; } ） ，但这些不是真正的“点击”事件。 它们在select元素的整个过程中都是“活的”（比如通过键盘的Tab键），这与真正的点击事件有点不同，它会触发一个动作 – 通常是mouseUp 。
checkboxhack的基本演示（你所要求的基本代码结构）：
label { display: block; background: lightgrey; width: 100px; height: 100px; } #demo:checked + label { background: blue; color: white; }
<input type="checkbox" id="demo"/> <label for="demo">I'm a square. Click me.</label>
你可以使用伪类:target来模仿点击事件，让我来举个例子。
这是HTML：
<a href="#something">Show</a> <div id="something">Bingo!</div>
这里是CSS：
#something { display: none; } #something:target { display: block; }
以下是它的样子： http : //jsfiddle.net/TYhnb/
有一件事要注意，这只限于超链接，所以如果你需要使用超链接以外的其他function，比如button，那么你可能需要对它进行一些修改，比如将超链接devise为一个button。
如果给元素一个tabindex那么你可以使用:focus伪类来模拟点击。
HTML
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />
CSS
#btnLeft:focus{ width:70px; height:74px; }
编辑：OP之前回答澄清他想要什么。 以下是一个类似于javascripts onclick的onclick，而不是:active伪类。
这只能通过Javascript或Checkbox Hack来实现
checkbox黑客基本上让你点击一个标签，“检查”一个checkbox，允许你设置样式的标签，如你所愿。
演示
TylerH做了一个非常好的答案，我只需要给最后一个button版本一个更新。
#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>
好吧，这可能是一个旧的post…但是在谷歌的第一个结果，并决定让你自己在这个组合。
首先我将使用焦点
原因是，它适用于我正在显示的示例，如果有人想要鼠标放下types的事件，然后使用主动
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'); }
JS FIDDLE LINK： http : //jsfiddle.net/00wwkjux/
那么为什么我在旧线程发布这个，以及因为这里的例子不同，我想提供一个回到社区这是一个工作的例子。
正如线程创build者已经回答的那样，他们只希望效果在点击事件中持续。 现在虽然这不是确切的需要，它的接近。 当鼠标closures时，主动会animation，而需要更长时间的更改需要使用javascript来完成。
然而，Bojangles的答案是正确的。
“应用样式并将其应用于onclick的唯一方法是使用一些JavaScript”
在点击之后保持块可见的意义上，这并不是真的。 我有类似的情况，我需要一个与onClick的popupdiv我不能添加任何JS或更改标记/ HTML（一个真正的CSS解决scheme），这是可能的一些注意事项。 你不能使用：目标技巧，可以创build一个不错的popup窗口，除非你可以改变HTML（添加一个“ID”），所以出来。
在我的情况下，popupdiv被包含在另一个div内，我希望popup窗口出现在另一个div的顶部，这可以通过使用以下组合来完成：active和：hover：
/* Outer div - needs to be relative so we can use absolute positioning */ .clickToShowInfo { position: relative; } /* When clicking outer div, make inner div visible */ .clickToShowInfo:active .info { display: block; } /* And hold by staying visible on hover */ .info:hover { display: block; } /* General settings for popup */ .info { position: absolute; top: -5; display: none; z-index: 100; background-color: white; width: 200px; height: 200px; }
例子（以及一个允许点击popup窗口使其消失）的例子：
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
.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>
我有下面的代码鼠标hover和鼠标点击，它的工作原理：
//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; }
不与真正的CSS。 你可以像在这里所说的其他人一样使用活动，或者使用checkbox/广播黑客，但我不会推荐它，因为它只限于兄弟姐妹。
这就是说，显然有一个非常酷的POSTCSS插件 ，可以让你写：
.menu a:click { color: red; @action toggle-class("active"); }
它会编译javascript：
$(function() { $(".menu a").on("click", function () { $(this).css({ "color", "red" }).toggleClass("active"); }); $(".menu a").on("click", function () { $(this).next().show(1000); }); $(".menu a").on("click", function () { $('.item').slideToggle(); }); });
