css - 单选按钮选择器 CSS ONLY pls

Question

我创建了一个带有单选按钮的 CSS 图像 slider 来控制它。我已将单选按钮设置为 visibility: hidden并使用缩略图作为标签。 html 看起来像这样:

<div class="slider">
<input type="radio" value="navy" id="colour" name="attribute_colour" >
<label for="navy">
<img src="uploads/navy.png">
</label> 

对其他缩略图重复第 2-5 行，然后:

<div class="slidermain"><ul>
<li>
<img src="uploads/navyfullsize.png">
</li>

对主图像重复第 2-4 行并以 :

结束

</ul></div></div>`

我想点击 navy.png 的图片移动 <ul>包含 navyfullsize.png下降 100%，所以我认为选择 navy.png 的按钮/图像，你应该把它写到样式表中:

.slider input[type=radio]:checked + label[for=navy]~.slidermain>ul  
{ top:-100%; }

但是没有用!我尝试过许多类似的替代方案，我对 jquery 一无所知，所以 css 解决方案会很有帮助。

Answer 1

1) 定位元素需要position: relative 或position: absolute
2) 使用百分比值需要设置父容器的高度(一个200px)
3) 标签for 属性引用输入id，而不是值

试一试。