单击单选按钮更改重叠图像可见性

I want to change visibility options for two overlayed images for radio buttons. .productbutton appears as default, with .productbutton_lower with visibility: hidden. As a radio button becomes checked, .productbutton_lower becomes visible while .productbutton then becomes hidden.

我想更改单选按钮的两个重叠图像的可见性选项。 .productbutton显示为默认值,带有.productbutton_lower,可见性:隐藏。当选中单选按钮时,.productbutton_lower变为可见,而.productbutton则变为隐藏。

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 is wrong with my styling here, why won't .productbutton_lower become visible after the radio button is checked? Additionally, forcing static visibility on .productbutton_lower gives odd positioning.

我的样式在这里出了什么问题,为什么在选中单选按钮后,.productbutton_lower不会变得可见?此外,强制.productbutton_lower上的静态可见性给出了奇怪的定位。

JSFiddle (as an aside, how do you use SO's inbuilt fiddle?)

JSFiddle(顺便说一下,你如何使用SO的内置小提琴?)

1 个解决方案

#1

Two issues, (1) use general sibling selector ~ not +. (2) visibility:visible not inline.

两个问题,(1)使用通用兄弟选择器〜不是+。 (2)可见性:可见不内联。

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:

General sibling selectors ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

一般兄弟选择器~combinator分离两个选择器,并且只有当它在第一个元素之前时才匹配第二个元素,并且它们共享一个共同的父元素。

Adjacent sibling selectors + will select only the specified element that immediately follows the former specified element.

相邻的同级选择器+将仅选择紧跟在前一个指定元素之后的指定元素。

Lastly, visibility:inline does not exist in CSS.

最后,可见性:CSS中不存在内联。

#1