当项目被点击改变背景颜色- CSS(没有jQuery)

When item is clicked change background color - CSS (Without jQuery)

本文关键字：CSS 没有 jQuery 颜色 背景 项目 改变      更新时间：2023-09-26

我正在尝试添加此功能，当"。点击"图标"时，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>

对于纯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>

有…您只需要一个触发器，如单选按钮或复选框。结合不同的选择器…例子:

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

但是你需要使用display:none来隐藏复选框

相关文章：