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

7 浏览
0 Comments

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

我有一个图片元素，我想在点击时进行更改。

这个可以实现：

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

但是我需要的是：

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

显然这样无效。是否有可能在CSS中实现`onclick`的行为（即不使用JavaScript）？

0

3 答案

0 Comments

在CSS中实现onclick效果的最佳方法（实际上是唯一的方法）是使用复选框技巧。它通过将

基本演示复选框技巧的代码结构如下：

label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}
#demo:checked + label {
    background: blue;
    color: white;
}

这里我在标记中将label放在input之后。这样我就可以使用相邻兄弟选择器（+键）仅选择紧跟在我的#demo复选框后面的label。由于:checked伪类适用于复选框，所以只有当复选框被选中时，#demo:checked + label才会应用样式。

另外，您可以使用:focus或:active伪类在IE7+中模拟“selected”事件。但是，这些不是真正的“click”事件。它们在元素被选中时一直处于“活动”状态（例如使用键盘进行“Tab”键选择），这与真正的点击事件稍有不同，真正的点击事件通常在鼠标弹起时触发动作。

如果您想要在点击除了输入/图像/按钮之外的其他位置时还原更改，您可能需要使用JavaScript事件监听器。请记住，这只是一个hack，如果可以使用JavaScript，它并不是创建“交互”体验的“最佳”方法。这只是当您只能使用CSS时的解决方法。

使用CSS实现onclick效果的方法是使用复选框技巧。通过将

0
0 Comments

可以在CSS中使用

:active

来实现点击效果，但是这个效果只会在鼠标按下时应用样式，释放鼠标后样式就会消失。要想实现点击后保持样式的效果，需要使用一些JavaScript代码。

除了使用JavaScript，CSS本身并没有提供直接的方法来实现点击效果。在caniuse.com/#feat=css-sel2中可以查看CSS的各种选择器的兼容性，其中IE7也支持:active选择器，但由于不支持其他一些选择器，所以没有列出来。

有一个回答提到可以使用CSS和HTML来实现点击效果，具体方法是添加一个和

在讨论中某些情况下，原始问题是要求不使用JavaScript的解决方案，TylerH的回答提供了一个纯CSS的解决方案。但是有人指出，这个解决方法虽然没有使用JavaScript，但是仍然需要修改HTML结构。所以严格来说并不能称之为纯CSS的解决方案。

，CSS本身并没有提供直接的方法来实现点击效果，如果要实现点击后保持样式的效果，一般需要结合JavaScript来实现。但是可以使用

:active

选择器来实现鼠标按下时的样式效果。

0
0 Comments

你可以使用伪类`:target`来模拟点击事件。让我举个例子。

#something {
  display: none;
}
#something:target {
  display: block;
}


显示

Bingo!

这是效果的演示：[http://jsfiddle.net/TYhnb/](http://jsfiddle.net/TYhnb/)

需要注意的一点是，这只适用于超链接，所以如果你需要在其他地方使用，比如按钮，可能需要进行一些小的修改，比如将超链接样式化成按钮。

那么如何撤销这个操作呢？

我认为你不能对不可见的元素进行操作。

0