My image doesn't show up after checking the radio tag

I wanna change my image after clicking on radio tag I originally make my image opacity 0 and after 1 click on radio tag it should become opacity 1 but it becomes nothing heres my code. thx in advance https://codepen.io/Dennyyan/pen/NWEBeJB
19 Replies
Jochem
Jochemā€¢16mo ago
#radio2:checked .cases>#r1{
opacity: 100%;
}
#radio2:checked .cases>#r1{
opacity: 100%;
}
This selector will select an element with id r1, which is a direct descendant of an element with the class cases, which in turn is a descendant (direct or indirect) of an element with id radio2 that is also checked. It's not going to select that #r1 anywhere in the DOM whenever #radio2 is checked I'm not sure you can currently do this with just CSS, at least not with your current HTML
Yann2
Yann2ā€¢16mo ago
In that case how should I do that image to appear I'm sorry if I'm being rude but I got stuck here for a long time
Jochem
Jochemā€¢16mo ago
if you need to use radio buttons, you'll have to use javascript. You can use an onchange event and the add a class or set the opacity using element.style.opacity
Yann2
Yann2ā€¢16mo ago
Ah but the assignment was not to use JavaScript and with css only
šŸ„¹šŸ„¹
Jochem
Jochemā€¢16mo ago
do what exactly? Specifically something with images and radio inputs?
Chris Bolson
Chris Bolsonā€¢16mo ago
You could get this to work with css if the radio buttons were siblings of the images or labels.
Yann2
Yann2ā€¢16mo ago
It was supposed to look like this I give the cases and straps as a radio tag If I click the radio tag 1 It should be case image no 1 that is showing up on the big image place. I give position absolute and Layering all the image in one place and give the opacity 0 So when I click the radio tag 1 the big image of case1 opacity will become 1. That's how I was intended to do. Was my thinking logic was wrong?
Jochem
Jochemā€¢16mo ago
What Chris said is true. It's called the checkbox trick, and for some reason I spaced on being able to do it with radio buttons. If you change your selector to:
#radio2:checked ~ #st1{
opacity: 100%;
}
#radio2:checked ~ #st1{
opacity: 100%;
}
and your HTML to
<div class="applewatch">
<div class="straps">
<input type="radio" class="radio_item" value="" name="item" id="radio1" checked>
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<input type="radio" class="radio_item" value="" name="item" id="radio3">
<input type="radio" class="radio_item" value="" name="item" id="radio4">
<input type="radio" class="radio_item" value="" name="item" id="radio5">
<img src="https://picsum.photos/300/200" alt="" id="st1">
<img src="https://picsum.photos/300/201" alt="" id="st2">
<img src="https://picsum.photos/300/202" alt="" id="st3">
<img src="https://picsum.photos/300/203" alt="" id="st4">
<img src="https://picsum.photos/300/204" alt="" id="st5">
</div>
<div class="medium"></div>
<div class="cases">
<input type="radio" class="radio_item2" value="" name="item2" id="radio6" checked>
<input type="radio" class="radio_item2" value="" name="item2" id="radio7">
<input type="radio" class="radio_item2" value="" name="item2" id="radio8">
<input type="radio" class="radio_item2" value="" name="item2" id="radio9">
<input type="radio" class="radio_item2" value="" name="item2" id="radio10">
<img src="https://picsum.photos/301/200" alt="" id="ca1">
<img src="https://picsum.photos/302/200" alt="" id="ca2">
<img src="https://picsum.photos/303/200" alt="" id="ca3">
<img src="https://picsum.photos/304/200" alt="" id="ca4">
<img src="https://picsum.photos/305/200" alt="" id="ca5">
</div>
</div>
<div class="applewatch">
<div class="straps">
<input type="radio" class="radio_item" value="" name="item" id="radio1" checked>
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<input type="radio" class="radio_item" value="" name="item" id="radio3">
<input type="radio" class="radio_item" value="" name="item" id="radio4">
<input type="radio" class="radio_item" value="" name="item" id="radio5">
<img src="https://picsum.photos/300/200" alt="" id="st1">
<img src="https://picsum.photos/300/201" alt="" id="st2">
<img src="https://picsum.photos/300/202" alt="" id="st3">
<img src="https://picsum.photos/300/203" alt="" id="st4">
<img src="https://picsum.photos/300/204" alt="" id="st5">
</div>
<div class="medium"></div>
<div class="cases">
<input type="radio" class="radio_item2" value="" name="item2" id="radio6" checked>
<input type="radio" class="radio_item2" value="" name="item2" id="radio7">
<input type="radio" class="radio_item2" value="" name="item2" id="radio8">
<input type="radio" class="radio_item2" value="" name="item2" id="radio9">
<input type="radio" class="radio_item2" value="" name="item2" id="radio10">
<img src="https://picsum.photos/301/200" alt="" id="ca1">
<img src="https://picsum.photos/302/200" alt="" id="ca2">
<img src="https://picsum.photos/303/200" alt="" id="ca3">
<img src="https://picsum.photos/304/200" alt="" id="ca4">
<img src="https://picsum.photos/305/200" alt="" id="ca5">
</div>
</div>
Checking radio2 will make #st2 show up you have to have the images and the images in the same parent though hm, hang on actually, you could still split the straps and cases updated the HTML
Yann2
Yann2ā€¢16mo ago
I see ah sorry my bad I didn't see Chris reply sorry Alright lemme go try Ty alot sirs šŸ™‡ā€ā™€ļøšŸ™‡ā€ā™€ļø
Chris Bolson
Chris Bolsonā€¢16mo ago
@jochemm is way faster than me but here is a quick demo in case it helps https://codepen.io/cbolson/pen/qBQyvdY
Yann2
Yann2ā€¢16mo ago
It works Thanks to both of you I am really thankful šŸ™‡ā€ā™€ļø
Jochem
Jochemā€¢16mo ago
glad to help!
Chris Bolson
Chris Bolsonā€¢16mo ago
this
Jochem
Jochemā€¢16mo ago
if you need any explanations for why yours didn't work and these do, just let us know šŸ™‚
Yann2
Yann2ā€¢16mo ago
Yes sir I do need a little Is it because of the selectors ? Those selector really is hard I thought if I use the id no matter where is it it will affect šŸ˜­
Jochem
Jochemā€¢16mo ago
nope, the ID will still only select in children of the earlier parts of the selector if you do
#st1 {
/* your rules here */
}
#st1 {
/* your rules here */
}
That'll select anywhere, but
.cases #st1 {
/* your rules here */
}
.cases #st1 {
/* your rules here */
}
would only select an element with id st1 inside cases, which doesn't exist, so it would just selectdo nothing
Yann2
Yann2ā€¢16mo ago
Ahhhhhhhh how dumb of me there is not #st1 in cases I seeee Tyvmmmmmmm thumbup šŸ”„šŸ”„šŸ”„
Jochem
Jochemā€¢16mo ago
CSS pretty much only lets you drill down and deeper, you can't go back up the tree or out of your parent and then down again the :has pseudoclass will let you do some cool stuff, but it's not quite ready for production use and I wouldn't worry about it until the rest comes more naturally
Yann2
Yann2ā€¢16mo ago
I see I was stucking here for 4 hours and use other means but still doesn't work so I come here asking for help I am glad that I did I got a good experience and knowledge hehe šŸ’ŖšŸ’ŖšŸ”„šŸ”„
Want results from more Discord servers?
Add your server