<分区>
我正在尝试添加此功能，当单击“.icon”时，hr 元素的背景颜色应从灰色变为白色，并在其处于事件状态时保持白色。
再次按下它应该变回灰色。
我已经使用 jQuery 实现了这一点 - 有没有一种方法可以使用纯 CSS 实现这一点？
代码在这里:https://jsfiddle.net/e3ux2ffb/
CSS: *
{
margin:0 auto;
padding:0px;
}
.top {
background-color:black;
width: 100%;
height: 60px;
}
.icon {
width: 28px;
border:1px solid gray;
padding:5px;
float:right;
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
margin-right:10px;
}
.icon hr:not(:first-child) {
margin-top:5px;
}
.icon hr {
height: 2px;
background-color:gray;
border:0px;
}
.icon:hover {
cursor:pointer;
}
.icon:active, .icon:focus {
background-color:white;
}
HTML:
<div class="top">
<div class="icon">
<span><hr><hr><hr></span>
</div>
</div>