我正在尝试创建一个性别切换按钮。但是当我尝试为性别图标着色时,它不会改变颜色。我试图在 CSS 中做到这一点。我知道如何用 Javascript 做到这一点,但我在 CSS 中做不到。
这是我的代码。
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}
<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>
当我单击复选框时,➜
符号应变为浅蓝色,而当我再次单击该复选框时,+
符号应变为粉红色。
我尝试使用以下代码,但它不起作用。
input:checked + .female{
color:pink;
}
input:checked + .male{
color:lightblue;
}
我哪里做错了。
如有任何帮助,我们将不胜感激。
谢谢。
最佳答案
您还需要使用父类 switch
,因为它是 input 的 sibling ,使用 +
时,您只能为 sibling 设置样式并在未选中时更改 h1 的颜色
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}
<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>
关于html - 在 CSS 中选中复选框时更改 H1 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53993448/