单选按钮选择器CSS仅适用

Question

我创建了一个带有单选按钮的css图像滑块来控制它。我已将单选按钮设置为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>的{​​{1}}向下移动100％，这样我就可以选择navyfullsize.png的按钮/图片了，你应该把它写进样式表：

navy.png

但无济于事！我尝试了很多类似的替代方案，我对jquery一无所知，所以css解决方案非常有用。

Answer 1

1）定位元素需要位置：相对或位置：绝对
2）使用百分比值需要设置父容器的高度（对于一个200px）
3）标签 for 属性引用输入 id ，而不是值

试一试。