Question

当我在纯CSS中打开/关闭单选按钮时，我正试图隐藏/显示一组图像。

有4个这样的单选按钮（第2组等）：

<input type="radio" name="imagetest" id="firstSet"><label for="firstSet" id="firstSet">First Set</label>

我把div中的一组图像放在这些单选按钮下面：

<div id="images">
<img src="images/01.jpg" class="firstset">
<img src="images/02.jpg" class="firstset">
<img src="images/03.jpg" class="secondset">
<img src="images/04.jpg" class="secondset">
<img src="images/05.jpg" class="thirdset">
<img src="images/06.jpg" class="firstset">
</div>

从stackoverflow的旧线程中得到一些线索，我像这样定义了我的CSS：

input#firstSet:checked ~ .firstset {
display: block;
}
input#secondSet:checked ~ .firstset, input#thirdSet:checked ~ .firstset {
display: none;
}

然而它根本不起作用，没有任何东西按预期出现/隐藏。

有人有任何关于如何解决这个问题的线索吗？

谢谢， SEB

Answer 1

＆＃13;

input#firstSet:checked ~ #images > .firstset {
display: block;
}
input#secondSet:checked ~ #images > .firstset, input#thirdSet:checked ~ .firstset {
display: none;
}

＆＃13;

<input type="radio" name="imagetest" id="firstSet"><label for="firstSet" id="firstSet">First Set</label>
<div id="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/JPEG_example_JPG_RIP_050.jpg" class="firstset">
<img src="http://findicons.com/files/icons/1637/file_icons_vs_2/256/jpg.png" class="firstset">
<img src="http://www.iconarchive.com/download/i93939/uiconstock/flat-file-type/jpg.ico" class="secondset">
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="secondset">
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="thirdset">
<img src="https://media.alienwarearena.com/media/tux-r.jpg" class="firstset">
</div>

＆＃13;

单击纯CSS中的单选按钮时隐藏一组图像

1 个答案: