Click是如何工作的，没有Jquery或Javascript在这里

Question

<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
  <div class="spinner diagonal part-1"></div>
  <div class="spinner horizontal"></div>
  <div class="spinner diagonal part-2"></div>
</label>

CSS 代码→

body {margin:50px;}
* {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}
#spinner-form {display:none;}
.spinner-spin {position:relative;float:left;height:50px;width:50px;}
.spinner-spin {cursor:pointer;}
.spinner-spin > .spinner {height:5px;width:50px;background-color:#000;}
.spinner-spin > .spinner.diagonal.part-1 {position:relative;float:left;margin-top:10px;}
.spinner-spin > .spinner.horizontal {position:relative;float:left;margin-top:6px;}
.spinner-spin > .spinner.diagonal.part-2 {position:relative;float:left;margin-top:6px;}
#spinner-form:checked ~ .spinner-spin > .horizontal {opacity: 0;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(225deg);-webkit-transform:rotate(225deg);margin-top:23px;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-225deg);-webkit-transform:rotate(-225deg);margin-top:-16px;}

同样的内容可以在代码 Pen.io

我的问题：→有伪类，例如→ a:hover ，

但是这里我们没有悬停效果，而是点击效果，所以点击效果是如何通过没有使用和 Javascript 或 JQuery 的普通 CSS 生成的。CSS 的哪个部分实际上导致了点击效果？是不是这么简单，我错过了什么。

替代问题→

是否有任何伪类来获取没有 JQuery 的单击功能。？

Answer 1

嗯，这是假点击效果，通常被称为复选框黑客，但不太容易访问。

在您共享的代码笔演示中，菜单图标放置在标签内，该标签负责对复选框输入的操作，您可能已经在标记中注意到了这一点。

相关：使用文本标签与表单控件关联...

在CSS样式中，复选框的使用方式(使用:checked(可以在检入(选中(和检出(未选中(状态下设置其直接邻居(即标签和/或标签内的元素(的样式。

总而言之，它使用以下方法创建点击效果： * 标签内的触发器(菜单图标(，负责在邻域中输入复选框以更改状态 * 然后根据复选框的状态使用 CSS 设置标签样式

如果需要，您可以在此处阅读更多相关信息。

Answer 2

它是一个

复选框，

<input type="checkbox" id="spinner-form" />

:checked伪类负责动画

#spinner-form:checked ~ .spinner-spin > .horizontal {opacity: 0;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(225deg);-webkit-transform:rotate(225deg);margin-top:23px;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-225deg);-webkit-transform:rotate(-225deg);margin-top:-16px;}