我可以有一个点击效果在CSS?

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

<img id="btnLeft">

如此:

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

但我需要的是:

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

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

当前回答

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

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

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

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

2013-06-23 04:58:29

其他回答

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">点击我!< / >标签

2016-01-19 19:23:22

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

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

2014-01-18 06:20:27

你能得到的最接近的是:active:

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

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

2012-11-29 16:29:28

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

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

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

这个演示。

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

2012-11-29 16:34:00

你可以使用:target。

或者通过类名过滤，使用.classname:target。

或者使用#idname:target过滤id名。

#id01:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .msg { display: none; } .close { color: white; width: 2rem; height: 2rem; background-color: black; text-align: center; margin: 20px; } <a href="#id01">Open</a> <div id="id01" class="msg"> <a href="" class="close">×</a> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div>

2019-03-27 17:11:57

我可以有一个点击效果在CSS?

推荐文章

最新文章

标签