我可以在CSS中有一个点击效果吗？

Question

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

<img id="btnLeft">

这项工作：

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

但我需要的是：

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

但是，很明显，它不起作用。在CSS中是否有可能有onhtml行为（即不使用JavaScript）？

Answer 1

您可以使用伪类：target来模拟点击事件，让我给您举个例子。

css prettyprint-override">#something {
  display: none;
}

#something:target {
  display: block;
}

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

Answer 2

最接近的是： active：

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

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

Answer 3

最好的方法（实际上是唯一的方法*）来模拟一个实际的点击事件只使用CSS（而不是只是悬停在一个元素或使一个元素活动，你没有mouseUp）是使用复选框黑客。它的工作原理是将一个标签附加到一个

此功能具有广泛的浏览器支持（选中的伪类是IE9）。

将相同的值应用于

*您可以通过IE7中的： active或： point伪类模拟选定事件（例如，对于通常为50px宽的按钮，您可以在active：#btnControl： active{宽： 75px；}），但这些不是真正的单击事件。在选择元素的整个过程中，它们都是实时的（例如通过Tab必应与您的键盘），这与真正的单击事件有点不同，真正的单击事件会在-通常是-mouseUp上触发操作。

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>