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的内置小提琴？）

Answer 1

两个问题，（1）使用一般兄弟选择器~而非+。（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>

<强>说明：

一般兄弟选择器~组合器分离两个选择器，并且仅当第一个元素前面有第二个元素时才匹配第二个元素，并且它们共享一个共同的父元素。

相邻的兄弟选择器+将选择仅立即跟随前指定元素的指定元素。

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

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

1 个答案: