My project involves creating a segmented switch, and I'm attempting to implement transitions to alter the color of text. Unfortunately, I've encountered an issue where the text color change does not seem to be working as expected.
Below is the CSS styling I am using:
#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;
}
This is how the HTML is structured:
<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 -->
I'm currently stuck trying to understand why the font color remains unchanged when clicking on the label divs.