可以在CSS中设置onclick效果吗?

I have an image element that I want to change on click.

我有一个图像元素，我想要改变点击。

/*This works:*/

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

/*But what I need is:*/

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

    <img id="btnLeft" >

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

但是，显然，它不起作用。是否有可能在CSS中有onclick行为(即不使用JavaScript)?

10 个解决方案

#1

The closest you'll get is :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。

#2

2018 Answer:

The best way (actually the only way*) to simulate an actual click event using only CSS (rather than just hovering on an element or making an element active, where you don't have mouseUp) is to use the checkbox hack. It works by attaching a label to an <input type="checkbox"> element via the label's for="" attribute.

最好的方法(实际上是唯一的方法*)是使用复选框hack来模拟一个实际的点击事件(而不是仅仅停留在一个元素上或使一个元素处于活动状态，而您没有mouseUp)。它通过通过标签的for=""属性将标签附加到元素。

This feature has broad browser support (the :checked pseudo-class is IE9+).

这个特性有广泛的浏览器支持(检查伪类是IE9+)。

Apply the same value to an <input>'s ID attribute and an accompanying <label>'s for="" attribute, and you can tell the browser to re-style the label on click with the :checked pseudo-class, thanks to the fact that clicking a label will check and uncheck the "associated" <input type="checkbox">.

将相同的值应用于's ID属性和附带的's for="" "属性，您可以告诉浏览器在单击时使用:checked伪类重新设置标签的样式，这是因为单击标签将检查和取消“关联”。

* You can simulate a "selected" event via the :active or :focus pseudo-class in IE7+ (e.g. for a button that's normally 50px wide, you can change its width while active: #btnControl:active { width: 75px; }), but those are not true "click" events. They are "live" the entire time the element is selected (such as by Tabbing with your keyboard), which is a little different from a true click event, which fires an action on - typically - mouseUp.

*您可以通过:active or:focus准类在IE7+中模拟“选定”事件(例如，对于一个通常为50px宽的按钮，您可以在active: #btnControl:active {width: 75px;)，但这些不是真正的“单击”事件。它们在元素被选中的整个过程中都是“实时”的(例如通过键盘进行制表)，这与真正的单击事件有点不同，后者通常在mouseUp上触发一个操作。

---

Basic demo of the checkbox hack (the basic code structure for what you're asking):

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>

Here I've positioned the label right after the input in my markup. This is so that I can use the adjacent sibling selector (the + key) to select only the label that immediately follows my #demo checkbox. Since the :checked pseudo-class applies to the checkbox, #demo:checked + label will only apply when the checkbox is checked.

在这里，我将标签放置在标记的输入之后。这样，我就可以使用相邻的同胞选择器(+ key)来选择紧接在#demo复选框后面的标签。因为:勾选的伪类应用于复选框，所以#demo:勾选+ label只会在选中复选框时应用。

Demo for re-sizing an image on click, which is what you're asking:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>

With that being said, there is some bad news. Because a label can only be associated with one form control at a time, that means you can't just drop a button inside the <label></label> tags and call it a day. However, we can use some CSS to make the label look and behave fairly close to how an HTML button looks and behaves.

尽管如此，还是有一些坏消息。因为标签每次只能与一个表单控件相关联，这意味着您不能在标签内放置一个按钮，然后就结束了。但是，我们可以使用一些CSS使标签看起来和行为非常接近HTML按钮的外观和行为。

Demo for imitating a button click effect, above and beyond what you're asking:

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    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:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}


.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    -moz-outline-radius: 5px;
    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>

Most of the CSS in this demo is just for styling the label element. If you don't actually need a button, and any old element will suffice, then you can remove almost all of the styles in this demo, similar to my second demo above.

本演示中的大部分CSS只是用于样式化标签元素。如果您实际上不需要按钮，并且任何旧元素都足够了，那么您可以删除这个演示中的几乎所有样式，类似于上面的第二个演示。

You'll also notice I have one prefixed property in there, -moz-outline-radius. A while back, Mozilla added this awesome non-spec property to Firefox, but the folks at WebKit decided they aren't going to add it, unfortunately. So consider that line of CSS just a progressive enhancement for people who use Firefox.

你也会注意到这里有一个前缀属性-moz-outline-radius。不久以前，Mozilla为Firefox添加了这个超棒的非规范属性，但是WebKit的工作人员很不幸地决定不添加它。所以考虑到CSS对于使用Firefox的人来说是一个进步的增强。

#3

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

您可以使用pseudo类:target来模拟单击事件，让我给您举个例子。

#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.

需要注意的是，这仅限于超链接，所以如果需要在超链接之外使用，比如按钮，您可能需要对它进行一些修改，比如将超链接样式化为按钮。

#4

If you give the element a tabindex then you can use the :focus pseudo class to simulate a click.

如果给元素一个tabindex，那么可以使用:focus pseudo类来模拟单击。

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/

#5

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

编辑:在OP澄清他想要什么之前回答。下面是一个onclick类似于javasonclick的onclick，而不是:active pseudo类。

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.

这个复选框实际上是让你点击一个标签，“检查”一个复选框，允许你按照自己的意愿来设计标签。

The demo

演示

#6

TylerH made a really good answer, and I just had to give that last button version an update.

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>

#7

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

首先我会使用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

这样做的原因是，对于我展示的示例来说，它工作得很好，如果有人想要一个鼠标向下类型的事件，那么就使用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小提琴链接: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完成。

#8

Bojangles answer is generally correct, however:

Bojangles的回答一般来说是正确的，但是:

"The only way to apply a style and keep it applied onclick is to use a bit of JavaScript"

"应用样式并使其保持为onclick的唯一方法是使用一点JavaScript"

This is not quite true in the sense of keeping the block visible after the click. 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.

这并不是完全正确的，因为在点击后块仍然可见。我也遇到过类似的情况，我需要一个带有onClick的弹出式div，在那里我不能添加任何JS或更改标记/HTML(一个真正的CSS解决方案)，这是有可能的，但有一些注意事项。您不能使用:target技巧来创建一个漂亮的弹出窗口，除非您可以更改HTML(添加一个“id”)，使其退出。

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:

在我的例子中，popup div包含在其他div中，我希望弹出框出现在其他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;
}

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

示例(以及允许单击弹出窗口使其消失的示例)

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

#9

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

@TylerH有很好的反应，但是它是一个非常复杂的解决方案。我有一个解决方案，你只是想要一个简单的“onclick”效果与纯css没有一堆额外的元素。

We will simply use css transitions. You could probably do similar with animations.

我们将使用css转换。你可以用动画做类似的事情。

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.

在这里，我还添加了“click”类，以便如果需要，javascript也可以提供这种效果。我使用0px drop-shadow过滤器，因为它会用这种方式突出显示给定的透明图形蓝色。

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.

我有一个0的过滤器，这样它就不会生效。当效果发布时，我可以添加一个延迟的过渡，这样它将提供一个不错的“点击”效果。

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

虽然您在这里受到限制，因为要突出显示的动画是即时的，但它仍然提供了所需的效果。您可以使用这个技巧来制作一个更平滑的整体过渡。

#10

I have the below code for mouse hover and mouse click and it works:

我有下面鼠标悬停和鼠标点击的代码，它可以工作:

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

and this code hides the image when you click on it:

当你点击它时，这段代码隐藏了图像:

.thumbnail:active span {
    visibility: hidden;
}