Question

不工作

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
   </label>
</div>

这有效

<div>
   <input type="checkbox" id="check" class="check-with-label" />
   <label for="check" class="label-for-check">My Label </label>
   <img class="product-add-image-preview" src="http://ecx.images-amazon.com/images/I/417MwhxcFKL._SY300_.jpg" />
</div>

我需要标签中的图像，以便在选择图像时选中复选框。但是当我在标签中有图像时，我似乎无法使CSS工作。

http://jsfiddle.net/4QV3s/

Answer 1

那是因为你试图访问图像，但你忘记了标签。此外，你不想使用〜，你想使用+所以它将访问以下，只有以下标签。再次用〜替换+，你会明白我的意思。

.check-with-label:checked + label > .product-add-image-preview {
    border:10px solid yellow;
    padding:0; /* To keep things from moving */
}

这是一个更新的小提琴。我添加了第二张图片，以便您可以看到它们彼此独立工作：http://jsfiddle.net/4QV3s/1/

选中复选框时以及单击图像时突出显示图像

1 个答案: