我有一个图像元素,我想在点击时改变它。

<img id="btnLeft">

如此:

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

但我需要的是:

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

但是,很明显,这是行不通的。是否有可能在CSS中有onclick行为(即,不使用JavaScript)?


当前回答

下面是一个类似于JavaScript的onclick的onclick,而不是:active伪类。

这只能通过JavaScript或复选框Hack来实现。

复选框黑客本质上是让你点击一个标签,“检查”一个复选框,允许你按照自己的意愿设置标签的样式。

这个演示。

在OP澄清他想要什么之前回答了。

其他回答

如果你给元素一个标签索引,那么你可以使用:focus伪类来模拟点击。

# btnLeft:{焦点 宽度:70 px; 身高:74 px; } <img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>

您可以使用伪类:target来模拟打开单击事件。让我给你们举个例子。

#{东西 显示:没有; } {#的东西:目标 显示:块; } < a href = " #“>显示< / > < div id = "东西" >宾果!< / div >

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

需要注意的一点是,这仅限于超链接,因此如果您需要在其他超链接上使用,例如按钮,您可能需要稍微修改一下,例如将超链接样式化,使其看起来像按钮。

我有一个问题的元素,必须是红色的悬停和蓝色的点击,而悬停。要用CSS实现这一点,你需要例如:

h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>

我挣扎了一段时间,直到我发现CSS选择器的顺序是我所遇到的问题。问题是我换了位置,主动选择器不工作了。然后我发现:hover先去,然后:active。

下面是一个类似于JavaScript的onclick的onclick,而不是:active伪类。

这只能通过JavaScript或复选框Hack来实现。

复选框黑客本质上是让你点击一个标签,“检查”一个复选框,允许你按照自己的意愿设置标签的样式。

这个演示。

在OP澄清他想要什么之前回答了。

TylerH做了一个非常好的回答,我只需要给最后一个按钮一个视觉更新。

.btn { border - radius: 5 px; 填充:10px 30px; Box-shadow: 1px 1px #000; Background-image: linear-gradient(to bottom, #eee, #ddd); } .btn:{徘徊 Background-image: linear-gradient(to top, #adf, #8bf); } {.btn:活跃 Margin: 1px 1px 0; Box-shadow: -1px -1px #000; } # btnControl { 显示:块; 可见性:隐藏; } <input type="checkbox" id="btnControl"/> <label class="btn" for="btnControl">点击我!< / >标签