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

Question

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

<img id="btnLeft">

这个有效:

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

但我需要的是:

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

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

Answer 1

仅使用 CSS 模拟实际 click 事件的最佳方法(实际上是唯一方法*)(而不是仅仅悬停在元素上或使元素处于事件状态，在这种情况下您没有 mouseUp ) 是使用复选框 hack。它通过标签的 label 属性将 <input type="checkbox"> 附加到 for="" 元素来工作。

此功能具有 broad browser support(:checked 伪类是 IE9+)。

将相同的值应用于 <input> 的 ID 属性和随附的 <label> 的 for="" 属性，您可以告诉浏览器使用 :checked 伪类重新设置点击标签的样式，这要归功于点击标签将选中和取消选中“关联的”<input type="checkbox">。

* 您可以通过 IE7+ 中的 :active 或 :focus 伪类模拟“选定”事件(例如，对于通常为 50px 宽的按钮，您可以在 active : #btnControl:active { width: 75px; } 时更改其宽度)，但这些不是真的“点击” ”事件。它们在元素被选择的整个过程中都是“事件的”(例如通过 Tabbing 与您的键盘)，这与真正的点击事件有点不同，后者会在 - 通常 - mouseUp 上触发一个 Action .

---

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

在这里，我将标签放置在标记中的输入之后。这样我就可以使用 adjacent sibling selector(+ 键)仅选择紧跟在我的 #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="https://placekitten.com/200/140" id="btnLeft" /></label>

话虽如此， 还是有一些坏消息。因为标签只能是 associated with one form control at a time ，这意味着您不能只在 <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;
    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 仅用于设置标签元素的样式。如果您实际上不需要按钮，并且任何旧元素都足够，那么您可以删除此演示中的几乎所有样式，类似于我上面的第二个演示。