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

Question

我有一个想要在点击时更改的图像元素.

<img id="btnLeft">

这有效:

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

但我需要的是:

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

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

Answer 1

截至2019年的答案:

使用CSS 模拟实际点击事件的最佳方式(实际上唯一的方法*)(而不是仅仅悬停在元素上或使元素处于活动状态,你没有使用mouseUp)是使用复选框hack.它的工作原理是通过标签的属性label将<input type="checkbox">元素附加到元素上for="".

此功能具有广泛的浏览器支持(:checked伪类是IE9 +).

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

*您可以模拟通过了"选择"的事件:active或:focus在IE7 +伪类(如一个按钮,这就是通常50px宽,你可以改变它,而宽度active:#btnControl:active { width: 75px; }),但这些都不是真正的"点击"事件.它们在选择元素的整个过程中都是"实时"的(例如通过Tab键盘敲击),这与真正的点击事件略有不同,后者会触发一个动作 - 通常 - mouseUp.

复选框hack的基本演示(你要问的基本代码结构):

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>

在这里,我在标记输入后立即定位了标签.这样我就可以使用相邻的兄弟选择器(+键)来仅选择紧跟在我的#demo复选框后面的标签.由于:checked伪类适用于复选框,#demo:checked + label因此仅在选中复选框时才会应用.

演示用于在点击时重新调整图像大小,这就是您所要求的:

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

有了这样说,还有就是一些坏消息.因为标签一次只能与一个表单控件关联,这意味着您不能只在<label></label>标签内放置一个按钮并将其调用一天.但是,我们可以使用一些CSS使标签外观和行为与HTML按钮的外观和行为非常接近.

用于模仿按钮单击效果的演示,超出您的要求:

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

此演示中的大多数CSS仅用于标注元素的样式.如果你实际上不需要一个按钮,任何旧的元素就足够了,那么你可以删除这个演示中的几乎所有样式,类似于我上面的第二个演示.

你还会注意到我有一个前缀属性,-moz-outline-radius.不久前,Mozilla将这个非常棒的非规范属性添加到Firefox中,但不幸的是,WebKit的人们决定不再添加它.因此,考虑到CSS系列只是对使用Firefox的用户进行渐进式增强.

Answer 2

你最接近的是:active:

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

但是,这只会在按住鼠标按钮时应用样式.应用样式并将其应用于 onclick 的唯一方法是使用一些JavaScript.

Answer 3

你可以使用伪类:target来模仿点击事件,让我举个例子.

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

这是它的样子:http://jsfiddle.net/TYhnb/

有一点需要注意,这仅限于超链接,因此如果您需要使用非超链接(例如按钮),您可能需要稍微破解它,例如将超链接样式化为按钮.

Answer 4

如果给元素a,tabindex则可以使用: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

编辑:在OP澄清他想要的之前回答.以下是类似于javascripts onclick的onclick,而不是:active伪类.

这只能通过Javascript或Checkbox Hack实现

复选框hack基本上让你点击一个标签,"勾选"一个复选框,允许你按照自己的意愿设置标签的样式.

该演示

Answer 6

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

一个纯朴的CSS解决方案又如何呢？

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

我们将只使用CSS过渡。您可能会对动画做类似的事情。

诀窍是更改转换的延迟，以使其在用户单击时持续。

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

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

我在这里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;
}

这使我可以进行设置，以便当用户单击按钮时，它突出显示为蓝色，然后逐渐淡出（当然，您也可以使用其他效果）。

尽管从某种意义上说，要突出显示的动画是即时的，所以您受到限制，但它仍然可以提供所需的效果。您可能会将此技巧与动画配合使用以产生更平滑的整体过渡。

Answer 8

好吧,这可能是一个老帖子...但是谷歌的第一个结果,并决定自己组成这个...

我将首先使用焦点

这样做的原因是它适用于我正在显示的示例,如果有人想要鼠标按下类型事件然后使用活动

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/

那么为什么我在一个旧的帖子中发布这个,好吧因为这里的例子各不相同,我想提供一个回到社区,这是一个工作的例子.

正如线程创建者已经回答的那样,他们只希望效果在点击事件期间持续.现在虽然这不是那种需要,但它已经接近了.当鼠标停止时,激活将生成动画,并且您需要持续更长时间的任何更改都需要使用javascript完成.

Answer 9

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

尽管这里有很多（否则是正确的）答案，您实际上可以仅使用 CSS（并且不使用复选框hack）就可以持久保留更改（例如，单击后出现并保持可见的块/弹出窗口）因为您只需要在悬停时保持不变。

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

我有一个类似的情况，我需要一个带有onClick的弹出式div，在其中我无法添加任何JS或更改标记/ HTML（这是一个真正的CSS解决方案），并且有一些警告是可能的。除非可以更改HTML（添加“ id”），否则您不能使用可以创建漂亮弹出窗口的：target技巧。

在我的情况下，弹出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;
}

示例（以及允许单击弹出窗口使其消失的示例）：

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

我还在下面插入了一个代码片段示例，但是在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 { 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;
}

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