我正在进行分段开关，并且尝试使用过渡来更改文本的颜色，但是由于某些原因，文本颜色更改无法正常工作。
https://jsfiddle.net/zp2z2bvw/1/
这是CSS样式：
#Favorites_Switch:checked ~ #Selected_Container {
position: absolute;
left: 50%;
transition: all .15s ease;
border-radius: 0px 5px 5px 0px;
}
#Favorites_Switch:checked ~ #Favorites_Text {
color: #38D1A9;
transition: color .2s ease;
}
#Favorites_Switch:checked ~ #All_Text {
color: #FFFFFF;
transition: color .2s ease;
}
#All_Switch:checked ~ #Selected_Container {
position: absolute;
left: 0%;
transition: all .15s ease;
}
这是html。
<div id="Segmented_Control">
<input type="radio" name="Switch" value="All" id="All_Switch" class="Radio_Switch"/>
<input type="radio" name="Switch" value="Favorites" id="Favorites_Switch" class="Radio_Switch"/>
<div id="Selected_Container">
</div> <!-- Selected Container -->
<label for="All_Switch">
<div class="Switch_Containers" id="All_Container">
<p class="Switch_Text" id="All_Text">All</p> <!-- All Switch -->
</div>
</label> <!-- All Switch Label -->
<label for="Favorites_Switch">
<div class="Switch_Containers" id="Favorites_Container">
<p class="Switch_Text" id="Favorites_Text">Favorites</p> <!-- Favorites Switch -->
</div> <!-- Favorites Container -->
</label>
</div> <!-- Segmented Control -->
我无法弄清楚为什么在按标签div时字体颜色不会改变。
它不起作用，因为input复选框元素与文本元素（#Favorites_Text/ #All_Text）没有同级。您需要选择同级label元素，然后从那里选择后代文本元素。
换句话说，您将更改：
#Favorites_Switch:checked ~ #Favorites_Text { ... }
#Favorites_Switch:checked ~ #All_Text { ... }
到：
#Favorites_Switch:checked ~ label #Favorites_Text { ... }
#Favorites_Switch:checked ~ label #All_Text { ... }
#Favorites_Switch:checked ~ label #Favorites_Text {
color: #38D1A9;
}
#Favorites_Switch:checked ~ label #All_Text {
color: #FFFFFF;
}
附带说明，我还向元素添加了过渡，.Switch_Text以便在选中复选框之前和之后进行过渡。
如果在选中复选框时添加了转换，则仅在取消选中复选框时才会发生转换。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句