Выделите изображение, когда установлен флажок, и при нажатии на изображение

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/