如何使用通用同级选择器~定位/动画化div

Question

我正试图弄清楚一般的同级选择器是如何处理div的目标/触发/动画的。我看不出为什么它不移动图像类来显示其他图像。。

input.img_link1:checked ~ .image {top: 0; }
input.img_link2:checked ~ .image {top: -500px; }
input.img_link3:checked ~ .image {top: -1000px; }
input.img_link4:checked ~ .image {top: -1500px; }

以下是整个代码：http://jsfiddle.net/UeNxy

Answer 1

它不起作用，因为输入不是示例中图像的兄弟。他们有不同的父母。为了让他们成为兄弟姐妹，他们必须都在同一个div内，所以类似这样的东西：

<div class="frame">
    <input type="radio" class="link img_link2" name="select-img" />
    <input type="radio" class="link img_link3" name="select-img" />
    <input type="radio" class="link img_link3" name="select-img" />
    <input type="radio" class="link img_link4" name="select-img" />
    <img class="image" src="img1.jpg" alt="image 1" id="img1" />
    <img class="image" src="img1.jpg" alt="image 1" id="img2" />
    <img class="image" src="img1.jpg" alt="image 1" id="img3" />
    <img class="image" src="img1.jpg" alt="image 1" id="img4" />
</div>