我可以在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完成。

我可以在CSS中使用onclick效果吗？相关推荐

一个关于css中margin-right没有效果的问题
在做网页的时候,常常会遇到这样那样的问题,虽然都不是大问题,可以百度解决,但为了以后方便寻找解决问题以及加深记忆,之前的很多解决方案或资料都放在电脑作为笔记,很久没敲代码突然又上手就觉得之前存放的资源 ...
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆 - ...
如何在css中设置音乐效果,css实现简单音乐符效果
css实现简单音乐符效果利用css3中的transform.animation.keyframes实现 1 2 3 4 5 6 7 Document 8 9 .box{ 10 width:60px; ...
css中2D转换效果实现（4）
css3引入了2D和3D转换效果,自此css3进入了一个新的世界,接下来你要学好这些内容哟! 效果
使用fliter实现ie下css中rgba的效果
直接举例吧 background-color: rgba(255,255,255,0.8); 设置背景颜色为白色,不透明度设为80% 在ie下可以用fliter这一属性进行设置: filter:pro ...
html 实现格子效果,CSS中网格效果的实现方案
网络效果如下所示: 网格效果示例.png 在CSS中,网格效果的应用还是很广泛的,比如:棋盘格效果.参考线效果等等: 在CSS中实现颜色突变的效果有多种方案,如下: 方案1:table样式这个方案的 ...
css中图片有缩放和转动效果
现在html中利用div来包裹住一张图片. <div class="xuanzhuan"><img src="images/top.png" ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
css 选座,纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

我可以在CSS中使用onclick效果吗？相关推荐

最新文章

热门文章