Html 我可以在 CSS 中使用点击效果吗？

Question

提问by Alegro

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 onclickbehavior in CSS (i.e. without using JavaScript)?

但是，这显然行不通。是否有可能onclick在 CSS 中有行为（即不使用 JavaScript）？

Answer 1

采纳答案by Bojangles

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 appliedonclick is to use a bit of JavaScript.

但是，这只会在按住鼠标按钮时应用样式。应用样式并在点击时保持应用的唯一方法是使用一些 JavaScript。

Answer 2

回答by TylerH

Answer as of 2019:

截至 2019 年的回答：

The best way (actually the only way*) to simulate an actual clickevent 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 labelto an <input type="checkbox">element via the label's for=""attribute.

仅使用 CSS模拟实际单击事件的最佳方法（实际上是唯一的方法*）（而不是仅悬停在元素上或使元素处于活动状态，在没有mouseUp 的情况下）是使用复选框黑客。它的工作原理是通过标签的属性将 a 附加label到<input type="checkbox">元素for=""。

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

此功能具有广泛的浏览器支持（:checked伪类为 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 :checkedpseudo-class, thanks to the fact that clicking a label will check and uncheck the "associated" <input type="checkbox">.

将相同的值应用于 an<input>的 ID 属性和随附<label>的for=""属性，您可以告诉浏览器在单击时使用:checked伪类重新设置标签样式，这要归功于单击标签将选中和取消选中“关联” <input type="checkbox">。

* You can simulate a "selected" event via the :activeor :focuspseudo-class in IE7+ (e.g. for a button that's normally 50pxwide, 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.

* 您可以通过IE7+ 中的:activeor:focus伪类模拟“选定”事件（例如，对于通常50px很宽的按钮，您可以在active: 时更改其宽度#btnControl:active { width: 75px; }），但那些不是真正的“单击”事件。它们在元素被选中的整个时间都是“活动的”（例如通过Tab使用键盘进行bing），这与真正的点击事件略有不同，后者通常在上触发操作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 #democheckbox. Since the :checkedpseudo-class applies to the checkbox, #demo:checked + labelwill only apply when the checkbox is checked.

在这里，我在标记中的输入之后立即放置了标签。这样我就可以使用相邻的兄弟选择器（+键）只选择紧跟在我的#demo复选框后面的标签。由于:checked伪类适用于复选框，#demo:checked + 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 issome 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 canuse some CSS to make the label look and behave fairly close to how an HTML button looks and behaves.

话虽如此，但有一些坏消息。因为一个标签一次只能与一个表单控件相关联，这意味着您不能只在<label></label>标签中放置一个按钮就可以了。但是，我们可以使用一些 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 仅用于设置标签元素的样式。如果您实际上不需要button，并且任何旧元素就足够了，那么您可以删除此演示中的几乎所有样式，类似于我上面的第二个演示。

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 的人的渐进增强。

Answer 3

回答by Hendra Uzia

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

您可以使用伪类: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.

需要注意的一点是，这仅限于超链接，因此如果您需要在超链接以外的地方使用，例如按钮，您可能需要对其进行一些修改，例如将超链接的样式设置为看起来像按钮。

Answer 4

回答by Blake Plumb

If you give the element a tabindexthen you can use the :focuspseudo class to simulate a click.

如果你给元素 atabindex那么你可以使用:focus伪类来模拟点击。

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

Answer 5

回答by Andy

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

编辑：在 OP 澄清他想要什么之前回答。以下是类似于 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.

复选框黑客本质上让您点击一个标签，“检查”一个复选框，允许您根据需要设置标签样式。

The demo

该演示

Answer 6

回答by Ason

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

Answer 7

回答by Braden Rockwell Napier

How about a pure CSS solution without being (that) hacky?

一个纯粹的 CSS 解决方案如何而不是（那个）hacky？

.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 有很好的反应，但它是一个非常复杂的解决方案。对于那些只想使用纯 css 实现简单的“onclick”效果而没有一堆额外元素的人，我有一个解决方案。

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.

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

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.

我这里有一个 0s 的过滤器，所以它不会生效。当效果被释放时，我可以添加带有延迟的过渡，以便它提供一个很好的“点击”效果。

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

虽然您在这里受到限制，因为要突出显示的动画是即时的，但它仍然提供了所需的效果。您可能会将此技巧与动画结合使用以产生更平滑的整体过渡。

Answer 8

回答by Angry 84

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

这样做的原因是它适用于我展示的示例，如果有人想要鼠标按下类型事件，则使用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.

正如线程创建者已经回答的那样，他们只希望效果在点击事件期间持续。现在虽然这并不完全满足这种需求，但它很接近。active 将在鼠标按下时动画，您需要使用 javascript 完成任何需要持续更长时间的更改。

Answer 9

回答by David Ljung Madison Stellar

Warning! Particularly simple answer below! :)

警告！下面特别简单的回答！:)

You actually canhave a change that persists (such as a block/popup that appears and stays visible after a click) with onlyCSS (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.

您实际上可以仅使用CSS（并且不使用复选框 hack）就可以使更改持续存在（例如，在单击后出现并保持可见的块/弹出窗口），尽管这里的许多（否则正确的）答案声称，只要因为你只需要在悬停期间坚持。

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.

所以看看 Bojangles 和 TylerH 的答案，如果这些答案对你有用，但如果你想要一个简单且仅 CSS 的答案，该答案将在点击后保持块可见（甚至可以通过后续单击使块消失），然后看到这个解决方案。

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:

在我的例子中，弹出 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/

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.

我还在下面插入了一个代码片段示例，但是在 stackoverflow 沙箱中的位置很奇怪，所以我不得不在 innerDiv 之后放置“单击此处”文本，这通常不是必需的。

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

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

Answer 10

回答by Pir Fahim Shah

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

Html 我可以在 CSS 中使用点击效果吗？

提问by Alegro

采纳答案by Bojangles

回答by TylerH

Answer as of 2019:

截至 2019 年的回答：

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

复选框黑客的基本演示（您所要求的基本代码结构）：

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

单击时重新调整图像大小的演示，这就是您要问的：

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

模拟按钮点击效果的演示，超出您的要求：

回答by Hendra Uzia

回答by Blake Plumb

回答by Andy

回答by Ason

回答by Braden Rockwell Napier

回答by Angry 84

回答by David Ljung Madison Stellar

回答by Pir Fahim Shah

相关推荐

最近更新

标签

Html 我可以在 CSS 中使用点击效果吗？

提问by Alegro

采纳答案by Bojangles

回答by TylerH

Answer as of 2019:

截至 2019 年的回答：

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

复选框黑客的基本演示（您所要求的基本代码结构）：

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

单击时重新调整图像大小的演示，这就是您要问的：

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

模拟按钮点击效果的演示，超出您的要求：

回答by Hendra Uzia

回答by Blake Plumb

回答by Andy

回答by Ason

回答by Braden Rockwell Napier

回答by Angry 84

回答by David Ljung Madison Stellar

回答by Pir Fahim Shah

相关推荐

如何在 HTML 段落中添加空格

Html CSS阴影div的所有四个边

HTML 和 CSS 按钮对齐

Html CSS边距恐怖；边距在父元素之外添加空间

相关推荐

最近更新

标签