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;}

同样可以在Code Pen.io

上找到

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

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

替代问题→

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

Answer 1

这是一个复选框，

<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;}

Answer 2

嗯，这是假的点击效果，通常被称为复选框黑客，但不是可访问性友好。

在您共享的codepen演示中，菜单图标放在一个标签内，该标签负责复选框输入上的操作，您可能已在标记中注意到。

相关：Using text labels to associate with form controls...

在CSS样式中，复选框以这样的方式使用（使用:checked），它的直接邻居（即标签内的标签和/或元素）可以在检查时设置样式 - on（选中）和check-off（未选中）状态。

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

如果您愿意，可以阅读更多相关信息here。

Click如何在没有Jquery或Javascript的情况下工作

2 个答案: