Change the visibility of the overlay image when you click on the switch
I want to change the visibility options for two overlay images for radio buttons. .productbutton
displayed as default, from .productbutton_lower
p visibility: hidden
. When the switch is checked, .productbutton_lower
it becomes visible and .productbutton
becomes hidden.
Html
<strong>Bottle Size</strong><br/>
<label class="prodbutt">
<input type="radio" class="size" value="10" name="size" required="required" />
<img src="http://i.imgur.com/VTMVEab.png" class="productbutton" />
<img src="http://i.imgur.com/k9JVWfr.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
<input type="radio" class="size" value="30" name="size" required="required" />
<img src="http://i.imgur.com/KKsV0WU.png" class="productbutton" />
<img src="http://i.imgur.com/40ZKKJd.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
<input type="radio" class="size" value="100" name="size" required="required" />
<img src="http://i.imgur.com/sEeIGxt.png" class="productbutton" />
<img src="http://i.imgur.com/JBKhYI2.png" class="productbutton_lower" />
</label>
CSS
label.prodbutt {
position: relative;
}
img.productbutton {
height: 25px;
}
img.productbutton_lower {
height: 25px;
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
}
label.prodbutt > input[type="radio"] {
visibility: hidden;
position: absolute;
}
label.prodbutt > input[type="radio"]:checked + img.productbutton {
visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked + img.productbutton_lower {
visibility: inline;
}
What's wrong with my styling here, why won't it .productbutton_lower
become visible after checking the toggle? Also, forcing static visibility .productbutton_lower
does not give odd positioning.
JSFiddle (as an aside, how do you use SO inline script?)
source to share
Two questions, (1) use the generic selector sibling ~
not +
. (2) visibility:visible
not inline
.
label.prodbutt > input[type="radio"]:checked ~ img.productbutton {
visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked ~ img.productbutton_lower {
visibility: visible;
}
https://jsfiddle.net/rsu264fc/2/
label.prodbutt {
position: relative;
}
img.productbutton {
height: 25px;
}
img.productbutton_lower {
height: 25px;
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
}
label.prodbutt > input[type="radio"] {
visibility: hidden;
position: absolute;
}
label.prodbutt > input[type="radio"]:checked ~ img.productbutton {
visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked ~ img.productbutton_lower {
visibility: visible;
}
<strong>Bottle Size</strong>
<br/>
<label class="prodbutt">
<input type="radio" class="size" value="10" name="size" required="required" />
<img src="http://i.imgur.com/VTMVEab.png" class="productbutton" />
<img src="http://i.imgur.com/k9JVWfr.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
<input type="radio" class="size" value="30" name="size" required="required" />
<img src="http://i.imgur.com/KKsV0WU.png" class="productbutton" />
<img src="http://i.imgur.com/40ZKKJd.png" class="productbutton_lower" />
</label>
<label class="prodbutt">
<input type="radio" class="size" value="100" name="size" required="required" />
<img src="http://i.imgur.com/sEeIGxt.png" class="productbutton" />
<img src="http://i.imgur.com/JBKhYI2.png" class="productbutton_lower" />
</label>
Explanations:
A common selector selector ~
combinator separates two selectors and matches the second element only if it is preceded by the first and both have a common parent.
Adjacent selector functions +
will only select the specified element that immediately follows the first specified element.
Finally, it visibility:inline
doesn't exist in CSS.
source to share