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

Question

我想更改单选按钮的两个重叠图像的可见性选项。 .productbutton 显示为默认值，.productbutton_lower 和 visibility: hidden。当单选按钮被选中时，.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;
}

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

JSFiddle（顺便说一句，你如何使用 SO 的内置 fiddle？）

Answer 1

两个问题，(1) 使用一般同级 select 或 ~ 而不是 +。 (2) visibility:visible 不是 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>

说明：

General sibling selectors ~ 组合器将两个 selector 分开，并且仅当第二个元素位于第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

相邻兄弟select或+将select仅立即的指定元素跟在前一个指定的元素之后。

最后，visibility:inline 在 CSS 中不存在。

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

Change overlapped image visibility on radio button click

html

css

z-index

radio-button