トグル複数の画像を表示/

を隠す私は/クリックトグル複数の画像を表示/

上の表示非表示を切り替えたい10枚の画像を持っている私は、CSSを介して画像を切り替えているが、私はそれはlabel要素ので、複数で仕事を得るカント一般的です。ラベル要素をlabel1に変更しようとしましたが、うまくいきませんでした。また、ラベルにクラスを追加しようとしましたが、うまく動作しませんでした。

ツリーのチェックされた/チェックされていないイメージを示す2番目のイメージは、私が持っている10個のイメージすべてで達成したいものです。

私はCSSで行うことができませんか？任意のアイデアかどうか、jqueryで何をする必要がありますか？ CSSで

#golf { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background-image: url(https://www.thatsinsurance.com/golfunselected.png); 
 
} 
 

 
#golf:checked+label { 
 
    background-image: url(https://www.thatsinsurance.com/golfselected.png); 
 
} 
 

 
#naturaldisaster { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png); 
 
} 
 

 
#naturaldisaster:checked+label { 
 
    background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png); 
 
}

<body> 
 
    <p><input type="checkbox" id="golf" /><label for="golf"></label> 
 
    </p> 
 

 
    <p><input type="checkbox" id="naturaldisaster" /><label for="naturaldisaster"></label> 
 
    </p> 
 
</body>

出典

2017-10-12 Denise Field

あなたはこのようなものを使用することができます：あなたが行う必要があります

label{ 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     cursor: pointer; 
} 

input[type='checkbox'] { 
    display:none; 
} 
#naturaldisaster + label { 
    background-image: url(https://www.thatsinsurance.com/naturaldisasterunselected.png); 
} 
#naturaldisaster:checked + label { 
    background-image: url(https://www.thatsinsurance.com/naturaldisasterselected.png); 
}

をすべてのヘルプは感謝ここ

が私のコードでいただければ幸いですすべての写真と一緒に。

出典

2017-10-12 12:23:01

なぜこの回答が誰かからのdownvoteを得たか分からない、それは動作します！私は1をupvoted –

トグル複数の画像を表示/

答えて

関連する問題