迹忆客 专注技术分享

本文介绍了在 CSS 中模拟 onclick 事件的方法。

在 CSS 中使用 Checkbox Hack 模拟 Onclick 事件

我们无法在 CSS 中实现准确的 JavaScript onclick 事件。但是，我们可以使用 CSS 技巧来模拟 onclick 事件。这个技巧背后的核心概念是使用复选框和标签标签。我们可以为复选框中的 id 属性和 label 中的 for 属性使用相同的值来附加它们。单击标签将选中和取消选中复选框。因此，我们可以使用 :checked 选择器在单击时选中复选框。我们将使用相邻的兄弟选择器 + 来选择 label 内的 img 标签和复选框。因此，当复选框被选中时，我们可以选择图像并更改其尺寸。因此，我们可以使用 CSS 来实现 onclick 功能。

例如，从 <input> 标签创建一个复选框。将复选框的 id 设置为 btn。在它下面，写一个 <label> 标签并写下与 for 属性值相同的值 btn。在 label 标签内，插入图像。接下来，在 CSS 中，使用 CSS 选择器选择 id btn，并将 display 设置为 none。随后，在 btn id 上使用 :checked 选择器作为 #btn:checked。使用 + 运算符选择 label 标签内的 img 标签。选择后，将高度和宽度设置为 75px。

在这里，当我们单击图像时，图像的大小会减小。最初，图像是 100px 大小。因此，我们使用 CSS 实现了点击功能。

示例代码：

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

在 CSS 中使用 :target 伪类模拟 Onclick 事件

我们可以使用 :target 伪类来模拟仅使用 CSS 的 onlick 事件。伪类有助于在 CSS 中设置活动元素的样式。在这个方法中，核心概念是改变元素的 display 属性。当元素处于非活动状态时，我们可以将显示设置为 none，并在使用 :target 伪类选择元素时将其更改为 block。我们可以使用 :target 伪类设置 id 与 URL 片段匹配的元素的样式。

例如，使用 URL #day 编写一个 anchor 标签。写下今天是几号？标签内。在它下面，创建一个 id 为 day 的 div 元素。在 div 中写入文本 Sunday。在 CSS 中，使用 id 选择器选择 id day，并将 display 属性设置为 none。接下来，选择与 :target 伪类相同的 id，并将 display 属性设置为 block。

在下面的示例中，当我们单击今天是哪一天？文本时，将出现星期日。我们使用:target 类将隐藏元素的显示更改为可见。这样，我们就可以在 CSS 中模拟 onclick 事件。

示例代码：

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

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

在 CSS 中使用 :focus 伪类和 tabindex 属性模拟 Onclick 事件

我们可以使用 img 标签中的 tabindex 属性和 :focus 伪类来模拟 CSS 中的 onclick 事件。例如，插入带有 img 标签的图像，id 为 pic，tabindex 值为 0。在 CSS 中，使用 :focus 伪类选择 pic id。然后，将图像的高度和宽度更改为 75px。图像的初始大小为 100px。在这里，当我们单击图像时，图像的大小将更改为 75px。因此，我们可以仅使用 CSS 来实现 onclick 事件。

示例代码：

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }