good afternoon,
TL:DR // i want to change the opacity of my LABELs (maybe using the :checked selector?) without breaking the function of my SECTIONs, while keeping my LABELs above the INPUTs in the code. //
i m stumped on a hopefully simple problem: i m building a simple navigation menu consisting of three circles and three "slides", which will be displayed depending on which of the circles is clicked.
radio buttons are hidden behind LABELS made of CSS circles.
my LABELs are all placed above the various INPUT fields for the radio buttons, and they work fine. this arrangement allows for :hover effects on the LABELs, which i want.
the "slides" are in the form of nested SECTIONs, which are set to be displayed according to their associated radio being selected. this works fine, with each SECTION placed immediately following its associated INPUT.
my problem is that i can t seem to make use of the :CHECKED selector to change the opacity and shadow effect of the CSS LABELs, because they are not directly following the INPUT fields.
if i relocate the code for my LABELs to directly following the INPUT, the menu gets ruined by clicking on it as the different SECTIONs pop in and out of view, and i lose the :hover effects.
as an ugly fix, each SECTION includes a "cover up" LABEL to provide the opacity and shadow effect that i want. which is coded to cover up the first LABEL from higher on the page. but there must be a more elegant solution .
here s a bit from the HTML
<div style="margin-bottom:-15px">
<label for="rad1" class="nav_circle" style="background:#333;">t1</label>
<label for="rad2" class="nav_circle" style="background:#555;">t2</label>
<label for="rad3" class="nav_circle" style="background:#777;">t3</label>
</div>
<input id="rad1" name="rad" checked="checked" type="radio" class="test_1_slides">
<section style="background: #333">
<label for="rad1" class="nav_circle" style="margin-left:-10px; background:#33CC99;">t1</label>
<h1> 1 Lorem ipsum dolor sit amet</h1>
</section>
<input id="rad2" name="rad" type="radio" class="test_1_slides">
<section style="background: #555">
<label for="rad2" class="nav_circle" style="margin-left:61px; background:#555;">t2</label>
<h1> 2 Ei purto feugait intellegat sit, id pri detraxit urbanitas,</h1>
</section>
<input id="rad3" name="rad" type="radio" class="test_1_slides">
<section style="background: #777">
<label for="rad3" class="nav_circle" style="margin-left:132px; background:#777;">t3</label>
<h1> 3 Nam an diam augue deterruisset</h1>
</section>
hopefully the JSfiddle makes all of this description redundant :)
cheers!
https://jsfiddle.net/4ce431cs/ https://jsfiddle.net/4ce431cs/
