问题描述
我希望在检查按钮时更改按钮标签的颜色和背景,但它不起作用。这是一个可折叠的按钮。
.accordion>input[name="collapse"] {
display: none;
/*position: absolute;
left: -100vw;*/
}
.accordion label,.accordion .content {
margin-left: 0;
}
.accordion label {
display: block;
border-bottom: solid 1px #ffffff55;
width: 76%;
margin-left: 12%;
text-indent: 10px;
font-size: 15px;
font-weight: 400;
font-family: Open Sans;
margin-top: 7px;
padding-top: 13px;
padding-bottom: 7px;
}
.accordion .content {
overflow: hidden;
height: 0;
transition: 0.5s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 0px;
transition: height 0.5s;
}
/* For Desktop */
@media only screen and (min-width: 620px) {
.accordion .handle {
margin: 0;
font-size: 16px;
}
.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
user-select: none;
}
.accordion label:hover,.accordion label:focus {
background: rgba(255,255,0.2);
border: rgba(255,0.2);
border-radius: 5px;
}
.accordion .handle label:after {
font-family: FontAwesome;
content: "\f107";
display: inline-block;
margin-left: 10px;
font-size: 1em;
line-height: 1.556em;
vertical-align: middle;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 70px;
margin-left: 12%;
border-top: 0;
transition: 0.3s;
}
.accordion {
margin-bottom: 0;
}
.accordion>input[name="collapse"]:checked~.handle label:after {
transform: rotate(180deg);
transform-origin: center;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.accordion label {
color: #000;
background: #ffffff;
}
}
<div class="accordion">
<input type="checkBox" name="collapse" id="handle4">
<h2 class="handle ">
<label for="handle4" style="">Change Language</label>
</h2>
<div class="content">
<p>Some contents</p>
</div>
</div>
最后一条 CSS 指令是我试图用来更改标签“更改语言”的颜色和背景的指令,但它不起作用。 请帮忙!
解决方法
你的兄弟元素应该是 .handle label
而不是 .accordion label
您需要将指令更改为此
.accordion>input[name="collapse"]:checked ~ .handle label {
color: #000;
background: #ffffff;
}
您拥有的那个将不起作用,因为没有 .accordion 的直接兄弟