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
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 HTMLIn 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
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.opacityAh but the assignment was not to use JavaScript and with css only
š„¹š„¹
š„¹š„¹
do what exactly? Specifically something with images and radio inputs?
You could get this to work with css if the radio buttons were siblings of the images or labels.
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?
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:
and your HTML to
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 HTMLI see ah sorry my bad I didn't see Chris reply sorry
Alright lemme go try
Ty alot sirs
šāāļøšāāļø
@jochemm is way faster than me but here is a quick demo in case it helps https://codepen.io/cbolson/pen/qBQyvdY
It works Thanks to both of you
I am really thankful šāāļø
glad to help!
if you need any explanations for why yours didn't work and these do, just let us know š
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 š
nope, the ID will still only select in children of the earlier parts of the selector
if you do
That'll select anywhere, but
would only select an element with id selectdo nothing
st1 inside cases, which doesn't exist, so it would just Ahhhhhhhh how dumb of me there is not #st1 in cases
I seeee
Tyvmmmmmmm 
š„š„š„
š„š„š„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
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 šŖšŖš„š„