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>

如何使用通用兄弟选择器来定位/动画div？

1 个答案: