Question

我正在尝试添加此功能，当点击“。”时，hr元素的背景颜色应从灰色变为白色，并在活动时保持白色。

再次按下时，它应该会变回灰色。

我使用jQuery实现了这一点 - 有没有办法用纯CSS做到这一点？

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>

Answer 1

使用纯CSS，有一个带有复选框和:checked伪元素的技巧。

看到它正常工作：https://jsfiddle.net/e3ux2ffb/3/

CSS

 input[type=checkbox] { display: none; }
 input[type=checkbox]:checked + label { background:white;}

HTML

  <div class="top">
       <input type="checkbox" id="chckbx">
       <label for="chckbx" class="icon">
            <span><hr><hr><hr></span>
       </label>
  </div>

Answer 2

是的..你只需要一个触发器，如单选按钮或复选框.. 结合不同的选择器.. 例如：

checkbox:checked ~ div {
background-color: green;
}

但您需要使用display：none

隐藏该复选框

单击项目时更改背景颜色 - CSS（不带jQuery）

2 个答案:

CSS

HTML