blocks|key|3725594|text|最接近你的是:active|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3725595|#btnLeft:active+{
++++width:+70px;
++++height:+74px;
}|code-block|syntax|javascript|3725596|但是，这只会在按下鼠标按钮时应用该样式。应用样式并保持其在单击时应用的唯一方法是使用一点JavaScript。|3725597|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/CSS/%253aactive^0|6|7|6|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>The closest you'll get is <a href="https://developer.mozilla.org/en-US/docs/CSS/%3aactive"><code>:active</code></a>:</p>

<pre><code>#btnLeft:active {
    width: 70px;
    height: 74px;
}
</code></pre>

<p>However this will only apply the style when the mouse button is held down. The only way to apply a style <em>and keep it applied</em> onclick is to use a bit of JavaScript.</p>


blocks|key|375939|text|你可以使用伪类:target来模拟点击事件，让我给你一个例子。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|375940|​|375941|#something+{
++display:+none;
}

#something:target+{
++display:+block;
}|code-block|syntax|javascript|375942|<a+href="#something">Show</a>
<div+id="something">Bingo!</div>|375943|375944|它看起来是这样的：http://jsfiddle.net/TYhnb/|375945|需要注意的一点是，这只限于超链接，所以如果你需要在超链接之外的其他地方使用，比如一个按钮，你可能需要稍微修改一下，比如将一个超链接的样式设置成一个按钮的样式。|375946|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TYhnb/^0|7|7|0|0|0|0|0|9|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|R|3|S|5|6|7|1C|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>You can use pseudo class <code>:target</code> to mimic on click event, let me give you an example.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#something {
  display: none;
}

#something:target {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#something"&gt;Show&lt;/a&gt;
&lt;div id="something"&gt;Bingo!&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here's how it looks like: <a href="http://jsfiddle.net/TYhnb/" rel="noreferrer">http://jsfiddle.net/TYhnb/</a></p>

<p>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.</p>


blocks|key|375974|text|如果给元素一个tabindex，那么就可以使用:focus伪类来模拟单击。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|375975|HTML|BOLD|375976|<img+id="btnLeft"+tabindex="0"+src="http://placehold.it/250x100"+/>|code-block|syntax|javascript|375977|CSS|375978|#btnLeft:focus{
++++width:70px;
++++height:74px;
}|375979|http://jsfiddle.net/NaTj5/|375980|entityMap|0|LINK|mutability|MUTABLE|url^0|7|8|N|6|0|0|4|0|0|0|3|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|18|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|19|8|@$9|1A|A|1B|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1C|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|S]]]]

<p>If you give the element a <code>tabindex</code> then you can use the <code>:focus</code> pseudo class to simulate a click.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" /&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#btnLeft:focus{
    width:70px;
    height:74px;
}
</code></pre>

<p><a href="http://jsfiddle.net/NaTj5/">http://jsfiddle.net/NaTj5/</a></p>


blocks|key|3725634|text|编辑:在OP澄清他想要的之前回答。下面是类似于javascripts+onclick的onclick，而不是:active伪类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3725635|这只能使用Javascript或Checkbox+Hack来实现|3725636|checkbox+hack本质上是让你点击一个标签，“勾选”一个复选框，允许你随心所欲地设计标签的样式。|3725637|The+demo|3725638|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/the-checkbox-hack/|1|http://dabblet.com/gist/1506530^0|1I|7|0|G|D|0|0|0|4|4|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|L|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]|T|$5|O|P|Q|E|$R|U]]]]

<p>Edit: Answered before OP clarified what he wanted. The following is for an onclick similar to javascripts onclick, not the <code>:active</code> pseudo class.</p>

<p>This can only be achieved with either Javascript or the <a href="http://css-tricks.com/the-checkbox-hack/">Checkbox Hack</a></p>

<p>The checkbox hack essentially gets you to click on a label, that "checks" a checkbox, allowing you to style the label as you wish.</p>

<p>The <a href="http://dabblet.com/gist/1506530">demo</a></p>


blocks|key|5934648|text|TylerH做了一个非常好的回答，我只需要给最后一个按钮一个视觉上的更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5934649|​|5934650|.btn+{
++++border-radius:+5px;
++++padding:+10px+30px;
++++box-shadow:+1px+1px+1px+#000;
++++background-image:+linear-gradient(to+bottom,+#eee,+#ddd);
}

.btn:hover+{
++++background-image:+linear-gradient(to+top,+#adf,+#8bf);
}

.btn:active+{
++++margin:+1px+1px+0;
++++box-shadow:+-1px+-1px+1px+#000;
}

#btnControl+{
++++display:+block;
++++visibility:+hidden;
}|code-block|syntax|javascript|5934651|<input+type="checkbox"+id="btnControl"/>
<label+class="btn"+for="btnControl">Click+me!</label>|5934652|5934653|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/32721572/2827823^0|0|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p><a href="https://stackoverflow.com/a/32721572/2827823">TylerH</a> made a really good answer, I just had to give that last button a visual update.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    border-radius: 5px;
    padding: 10px 30px;
    box-shadow: 1px 1px 1px #000;
    background-image: linear-gradient(to bottom, #eee, #ddd);
}

.btn:hover {
    background-image: linear-gradient(to top, #adf, #8bf);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
}

#btnControl {
    display: block;
    visibility: hidden;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="btnControl"/&gt;
&lt;label class="btn" for="btnControl"&gt;Click me!&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3726090|text|如果是一个纯粹的CSS解决方案，而不是很麻烦的话呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3726091|​|3726092|📷|atomic|offset|length|3726093|.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%25;
++width:+100%25;
}

.arrow+{
++cursor:+pointer;
++transition:+filter+0.3s+ease+0.3s;
}

.arrow:active+{
++filter:+drop-shadow(0+0+0+steelblue);
++transition:+filter+0s;
}|code-block|syntax|javascript|3726094|<body+class="page">
++<div+class="controls">
++++<div+class="arrow">
++++++<img+src="https://i.imgur.com/JGUoNfS.png"+/>
++++</div>
++</div>
</body>|3726095|3726096|@TylerH有很好的反响，但它是一个相当复杂的解决方案。我有一个解决方案给那些只想要一个简单的"onclick“效果的纯css，而不是一堆额外的元素。|3726097|我们将简单地使用css转换。您可能会对动画执行类似的操作。|3726098|诀窍是更改转换的延迟，使其在用户单击时持续。|3726099|.arrowDownContainer:active,
.arrowDownContainer.clicked+{
++filter:+drop-shadow(0px+0px+0px+steelblue);
++transition:+filter+0s;
}|3726100|在这里，我还添加了"clicked“类，以便javascript也可以在需要时提供效果。我使用0px投影滤镜，因为对于我的情况，它将以这种方式突出显示给定的透明图形蓝色。|3726101|我在这里有一个0的过滤器，所以它不会生效。当效果被释放时，我可以添加一个延迟的过渡，这样它就会提供一个很好的“点击”效果。|3726102|.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;
}|3726103|这允许我设置它，以便当用户单击按钮时，它会高亮显示蓝色，然后慢慢淡出(当然，您也可以使用其他效果)。|3726104|虽然您在这里受到限制，因为要高亮显示的动画是即时的，但它仍然提供了所需的效果。您可以将此技巧与动画结合使用，以生成更平滑的整体过渡。|3726105|3726106|3726107|3726108|3726109|3726110|3726111|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/16e97e926cc9aa5799b9c63c7bc17cab.gif|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/82bbebc7c9128622991eff24a2302582.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/571b4e8b1e9c2637a83378ff1b4188ea.png^0|0|0|0|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|1|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1T|8|@]|9|@$G|1U|H|1V|1|1W]]|A|$]]|$1|I|3|J|5|K|7|1X|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|K|7|1Y|8|@]|9|@]|A|$L|M]]|$1|P|3|C|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|20|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|21|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|22|8|@]|9|@]|A|$]]|$1|W|3|X|5|K|7|23|8|@]|9|@]|A|$L|M]]|$1|Y|3|Z|5|6|7|24|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|25|8|@]|9|@]|A|$]]|$1|12|3|13|5|K|7|26|8|@]|9|@]|A|$L|M]]|$1|14|3|15|5|6|7|27|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|28|8|@]|9|@]|A|$]]|$1|18|3|C|5|6|7|29|8|@]|9|@]|A|$]]|$1|19|3|E|5|F|7|2A|8|@]|9|@$G|2B|H|2C|1|2D]]|A|$]]|$1|1A|3|C|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1B|3|C|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1C|3|E|5|F|7|2G|8|@]|9|@$G|2H|H|2I|1|2J]]|A|$]]|$1|1D|3|C|5|6|7|2K|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]]|1F|$1G|$5|1H|1I|1J|A|$1K|1L|1M|-4]]|1N|$5|1H|1I|1J|A|$1K|1O|1M|-4]]|1P|$5|1H|1I|1J|A|$1K|1Q|1M|-4]]]]

<p>How about a pure CSS solution without being (that) hacky?</p>

<p><a href="https://i.stack.imgur.com/yqgFv.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/yqgFv.gif" alt="enter image description here"></a>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="page"&gt;
  &lt;div class="controls"&gt;
    &lt;div class="arrow"&gt;
      &lt;img src="https://i.imgur.com/JGUoNfS.png" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>@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.</p>

<p>We will simply use css transitions.  You could probably do similar with animations. </p>

<p>The trick is to change the delay for the transition so that it will last when the user clicks.  </p>

<pre><code>.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}
</code></pre>

<p>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.</p>

<p>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. </p>

<pre><code>.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;
}
</code></pre>

<p>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). </p>

<p>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.</p>

<p><a href="https://i.stack.imgur.com/q5MoQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/q5MoQ.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/AaLUj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AaLUj.png" alt="enter image description here"></a></p>


blocks|key|376112|text|警告！下面是特别简单的答案！:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|376113|You+实际上可以使用CSS+(而不使用checkbox+hack)来实现持久的更改(比如在单击后出现并保持可见的块/弹出窗口)，而不管这里的许多(否则正确的)答案是什么，只要您只需要在悬停期间保持持久性即可。|376114|所以，看看Bojangles和TylerH的答案，如果它们对你有用，但如果你想要一个简单且只有CSS的答案，让一个区块在被点击后仍然可见(甚至可以通过后续的点击让区块消失)，那么可以看看这个解决方案。|376115|我遇到过类似的情况，我需要一个带有onClick的弹出式div，在那里我不能添加任何JS或更改标记/超文本标记语言(一个真正的CSS解决方案)，这是可能的，但有一些警告。你不能使用:target技巧来创建一个很好的弹出窗口，除非你能改变HTML+(添加一个'id')，这样它就不存在了。|376116|在我的例子中，弹出窗口div包含在另一个div中，我希望弹出窗口出现在另一个div的顶部，这可以使用:active和:hover的组合来实现：|376117|/*+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;
}|code-block|syntax|javascript|376118|示例(以及允许单击弹出窗口使其消失的示例)：|376119|http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/|offset|length|376120|我还在下面插入了一个代码片段示例，但是stackoverflow沙箱中的位置很奇怪，所以我不得不将“单击此处”文本放在innerDiv后面，这通常是不需要的。|376121|​|376122|/*+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+{+visibility:+visible;+}
	/*+And+hold+by+staying+visible+on+hover+*/
	.info:hover+{
		visibility:+visible;
	}
	/*+General+settings+for+popup+*/
	.info+{
		position:+absolute;
		top:+-10;
		visibility:+hidden;
		z-index:+100;
		background-color:+white;
		box-shadow:+5px+5px+2px+#aaa;
		border:+1px+solid+grey;
		padding:+8px;
		width:+220px;
		height:+200px;
	}
	/*+If+we+want+clicking+on+the+popup+to+close,+use+this+*/
	.info:active+{
		visibility:+hidden;	/*+Doesn't+work+because+DCEvent+is+:active+as+well+*/
		height:+0px;
		width:+0px;
		left:+-1000px;
		top:+-1000px;
	}|376123|<p+/>
<div+class="clickToShowInfo">
	<div+class="info">
		Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua
	</div>
	Click+here+to+show+info
</div>
<p+/>|376124|376125|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|1X|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@$S|1I|T|1J|1|1K]]|A|$]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|L|7|1O|8|@]|9|@]|A|$M|N]]|$1|12|3|X|5|6|7|1P|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|R]]]]

<p>Warning!  Particularly simple answer below!  :)</p>

<p>You <strong>actually can</strong> have a change that persists (such as a block/popup that appears and stays visible after a click) with <em>only</em> CSS (and without using the checkbox hack) despite what many of the (otherwise correct) answers here claim, as long as you only need persistence during the hover.</p>

<p>So take a look at Bojangles and TylerH's answers if those work for you, but if you want a simple and CSS only answer that will keep a block visible after being clicked on (and even can have the block disappear with a followup click), then see this solution.</p>

<p>I had a similar situation, I needed a popup div with onClick where I couldn't add any JS or change the markup/HTML (a truly CSS solution) and this is possible with some caveats.  You can't use the :target trick that can create a nice popup unless you can change the HTML (to add an 'id') so that was out.</p>

<p>In my case the popup div was contained inside the other div, and I wanted the popup to appear on top of the other div, and this can be done using a combination of :active and :hover:</p>

<pre><code>/* 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;
}
</code></pre>

<p>Example (as well as one that allows clicking on the popup to make it disappear) at:</p>

<p><a href="http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/" rel="nofollow noreferrer">http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/</a></p>

<p>I've also inserted a code snippet example below, but the positioning in the stackoverflow sandbox is weird so I had to put the 'click here' text after the innerDiv, which isn't normally needed.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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 { visibility: visible; }
	/* And hold by staying visible on hover */
	.info:hover {
		visibility: visible;
	}
	/* General settings for popup */
	.info {
		position: absolute;
		top: -10;
		visibility: hidden;
		z-index: 100;
		background-color: white;
		box-shadow: 5px 5px 2px #aaa;
		border: 1px solid grey;
		padding: 8px;
		width: 220px;
		height: 200px;
	}
	/* If we want clicking on the popup to close, use this */
	.info:active {
		visibility: hidden;	/* Doesn't work because DCEvent is :active as well */
		height: 0px;
		width: 0px;
		left: -1000px;
		top: -1000px;
	}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p /&gt;
&lt;div class="clickToShowInfo"&gt;
	&lt;div class="info"&gt;
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
	&lt;/div&gt;
	Click here to show info
&lt;/div&gt;
&lt;p /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3725762|text|好吧，这可能是个老帖子……但这是谷歌的第一个结果，并决定在这上面做你自己的组合，作为..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3725763|FOCUS首先我将使用|3725764|这样做的原因是，对于我展示的示例，它工作得很好，如果有人想要鼠标按下类型事件，则使用active|offset|length|style|BOLD|3725765|HTML代码：|3725766|<button+class="mdT+mdI1"+></button>
<button+class="mdT+mdI2"+></button>
<button+class="mdT+mdI3"+></button>
<button+class="mdT+mdI4"+></button>|code-block|syntax|javascript|3725767|CSS代码：|3725768|/*+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%2B1');+++}
++++.mdI2+++++++{+++background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');+++++}
++++.mdI2:focus+{+++background-image:url('http://placehold.it/256x256/555555&text=Image%2B2');+++}
++++.mdI3+++++++{+++background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');+++++}
++++.mdI3:focus+{+++background-image:url('http://placehold.it/256x256/555555&text=Image%2B3');+++}
++++.mdI4+++++++{+++background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');+++++}
++++.mdI4:focus+{+++background-image:url('http://placehold.it/256x256/555555&text=Image%2B4');+++}|3725769|JS小提琴链接：+http://jsfiddle.net/00wwkjux/|3725770|那么，为什么我要在一个旧的帖子中发布这篇文章，因为这里的例子不同，我想提供一个回社区，这是一个有效的例子。|3725771|正如线程创建者已经回答的那样，他们只希望效果在单击事件期间持续。现在，虽然这并不完全符合这种需求，但它已经很接近了。active将在鼠标按下时进行动画，任何需要持续更长时间的更改都需要使用javascript完成。|3725772|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/00wwkjux/^0|0|0|16|6|0|0|0|0|0|0|8|9|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@$F|1B|G|1C|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1G|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1H|8|@$F|1I|G|1J|H|I]]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1O|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>Okay, this maybe an old post... but was first result in google and decided to make your own mix on this as..</p>

<p><strong>FIRSTLY I WILL USE FOCUS</strong></p>

<p>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 <strong>active</strong></p>

<p>THE HTML CODE:</p>

<pre><code>&lt;button class="mdT mdI1" &gt;&lt;/button&gt;
&lt;button class="mdT mdI2" &gt;&lt;/button&gt;
&lt;button class="mdT mdI3" &gt;&lt;/button&gt;
&lt;button class="mdT mdI4" &gt;&lt;/button&gt;
</code></pre>

<p>THE CSS CODE:</p>

<pre><code>/* 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&amp;text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&amp;text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&amp;text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&amp;text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&amp;text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&amp;text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&amp;text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&amp;text=Image+4');   }
</code></pre>

<p><strong>JS FIDDLE LINK:</strong> <a href="http://jsfiddle.net/00wwkjux/">http://jsfiddle.net/00wwkjux/</a></p>

<p>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.</p>

<p>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.</p>


blocks|key|5934809|text|我遇到了一个问题，一个元素在悬停时必须被涂成红色，而在被悬停时被点击时必须被涂成蓝色。要使用css实现这一点，您需要执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5934810|h1:hover+{+color:+red;+}+
h1:active+{+color:+blue;+}

<h1>This+is+a+heading.</h1>|code-block|syntax|javascript|5934811|我挣扎了一段时间，直到我发现CSS选择器的order就是我遇到的问题。问题是我交换了位置，而激活的选择器不工作。然后我发现先用:hover，再用:active。|offset|length|style|BOLD|CODE|5934812|entityMap^0|0|0|L|5|1R|6|20|7|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@$I|S|J|T|K|L]|$I|U|J|V|K|M]|$I|W|J|X|K|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

<p>I had a problem with an element which had to be colored RED on hover and be BLUE on click while being hovered. To achieve this with css you need for example: </p>

<pre><code>h1:hover { color: red; } 
h1:active { color: blue; }

&lt;h1&gt;This is a heading.&lt;/h1&gt;
</code></pre>

<p>I struggled for some time until I discovered that the <strong>order</strong> of CSS selectors was the problem I was having. The problem was that I switched the places and the active selector was not working. Then I found out that <code>:hover</code> to go first and then <code>:active</code>.</p>


blocks|key|4206191|text|我有下面的鼠标悬停和鼠标点击的代码，它可以工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4206192|//For+Mouse+Hover
.thumbnail:hover+span{+/*CSS+for+enlarged+image*/
++++visibility:+visible;
++++text-align:center;
++++vertical-align:middle;
++++height:+70%25;
++++width:+80%25;
++++top:auto;
++++left:+10%25;
}|code-block|syntax|javascript|4206193|当你点击图片时，这段代码会隐藏它：|4206194|.thumbnail:active+span+{
++++visibility:+hidden;
}|4206195|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have the below code for mouse hover and mouse click and it works:</p>

<pre><code>//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%;
}
</code></pre>

<p>and this code hides the image when you click on it:</p>

<pre><code>.thumbnail:active span {
    visibility: hidden;
}
</code></pre>


blocks|key|3726191|text|您可以使用:target|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3726192|或者，要按类名进行筛选，请使用.classname:target|3726193|或使用#idname:target按id名称进行筛选。|3726194|​|3726195|#id01:target+{++++++
++++position:+absolute;
++++left:+0;
++++top:+0;
++++width:+100%25;
++++height:+100%25;
++++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;
}|code-block|syntax|javascript|3726196|<a+href="#id01">Open</a>

<div+id="id01"+class="msg">++++
++++<a+href=""+class="close">&times;</a>
++++<p>Some+text.+Some+text.+Some+text.</p>
++++<p>Some+text.+Some+text.+Some+text.</p>
</div>|3726197|3726198|entityMap^0|5|7|0|F|H|0|3|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|15|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|16|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|17|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|U|$]]

<p>you can use <code>:target</code></p>
<p>or to filter by class name, use <code>.classname:target</code></p>
<p>or filter by id name using <code>#idname:target</code></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  
&lt;a href="#id01"&gt;Open&lt;/a&gt;

&lt;div id="id01" class="msg"&gt;    
    &lt;a href="" class="close"&gt;&amp;times;&lt;/a&gt;
    &lt;p&gt;Some text. Some text. Some text.&lt;/p&gt;
    &lt;p&gt;Some text. Some text. Some text.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have an image element that I want to change on click.</p>

<pre><code>&lt;img id="btnLeft"&gt;
</code></pre>

<p>This works:</p>

<pre><code>#btnLeft:hover {
    width:70px;
    height:74px;
}
</code></pre>

<p>But what I need is:</p>

<pre><code>#btnLeft:onclick {
    width:70px;
    height:74px;
}
</code></pre>

<p>But, it doesn't work, obviously. Is it possible at all to have <code>onclick</code> behavior in CSS (i.e. without using JavaScript)?</p>


Can I have an onclick effect in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个想要在单击时更改的图像元素。<img id="btnLeft">这是可行的：#btnLeft:hover {    width:70px;    height:74px;}但我需要的是：#btnLeft:onclick {    width:70px;    height:74px;}但是，很明显，它不起作用。在CSS中有没有可能有onclick行为(也就是不使用JavaScript)？

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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