ラジオを画像に置き換えてください。

Question

ラジオボタンを画像で置き換えて、可能であればjQueryなしで交換したいと思います。 は、だからここの画像はフィドル・ファイルに示されている、私のバイオリンです：

<input type="radio" class="btn1" value="" name="item" id="radio1"> 
<label class="label1" for="radio1"> <img src="IMAGE"> </label> 

.btn1{ 
    display: none; 
} 

.btn1:checked + label { 
    opacity: 1; 
} 

https://jsfiddle.net/yxgvhL2j/

は私が猫の画像とのラジオボタンを交換したいです。キャットボタン（チェックマーク）をクリックすると、犬の画像が表示されます。 http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png

私は表示ブロックで何も試していないし、CSSで画像を統合しています...無駄なことはありません。

Pleaaseヘルプヘルプ：！ ' - （

Answer 1

あなたは:checked疑似クラス上の他の背景画像を切り替えることができますので、代わりに背景画像を使用してみてください：

アップデートHTML：

<input type="radio" class="btn1" value="" name="item" id="radio1"> 
<label class="label1" for="radio1"></label> 

更新されたCSS：

.btn1{ 
    display: none; 
} 

.btn1 + label { 
    display: block; 
    width: 256px; 
    height: 256px; 
    background-image: url("http://www.fancyicons.com/free-icons/122/hallowen/png/256/black_cat_256.png"); 
} 

.btn1:checked + label { 
    background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png"); 
} 

作業デモ：

https://jsfiddle.net/p30hm73v/