<分区>
标签 javascript jquery html css
<分区>
<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 Code →
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;}
可以在 Code Pen.io 上找到同样的内容
我的问题:→
有伪类，例如 →
a:悬停,
但这里我们没有悬停效果，只有点击效果 那么点击效果是如何通过不使用 Javascript 或 JQuery 的纯 CSS 生成的。 CSS 的哪一部分实际上导致了点击效果？就这么简单吗，我错过了什么。
ALTERNATIVE QUESTION →
是否有任何伪类在没有 JQuery 的情况下获得点击功能？
最佳答案
好吧，这是一种假点击效果，通常被称为复选框 hack，但对可访问性不友好。
在您共享的 codepen 演示中，菜单图标放置在一个标签内，该标签负责对复选框输入的操作，您可能已经在标记中注意到了这一点。
相关:Using text labels to associate with form controls...
在 CSS 样式中，复选框的使用方式(使用 :checked)使得它的直接邻居(即标签和/或标签内的元素)可以在检查时设置样式-打开(选中)和关闭(未选中)状态。
总而言之，它使用以下方法创建点击效果: * 标签内的触发器(菜单图标)负责附近的复选框输入以更改状态 * 然后根据复选框的状态使用 CSS 设置标签样式
您可以阅读更多相关信息 here如果你愿意的话。
关于javascript - Click 如何在没有 Jquery 或 Javascript 的情况下工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42855920/