Bascule l'image multiple afficher/masquer

J'ai 10 images que je veux activer/show hide sur clicBascule l'image multiple afficher/masquer

Je basculée une image via CSS, mais je ne peux pas obtenir de travailler avec plus d'un parce que l'élément d'étiquette est commun. J'ai essayé de changer l'élément label en label1 mais ça ne marchera pas, j'ai aussi essayé d'ajouter une classe à l'étiquette et je n'ai pas réussi à faire fonctionner ça.

La deuxième image montrant l'image cochée/non cochée de l'arbre est ce que je veux réaliser pour les 10 images que j'ai.

Je ne suis pas sûr que je peux faire avec CSS? Des idées ou sinon ce que je devrais faire sur jquery? Toute aide serait appréciée grâce

Voici mon code:

#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>

Source

2017-10-12 Denise Field

Avec CSS, vous pouvez simplement utiliser quelque chose comme ceci:

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); 
}

vous devez faire ça avec chaque image.

Source

2017-10-12 12:23:01

ne sais pas pourquoi cette réponse a reçu un downvote de quelqu'un, ça marche! J'ai mis en péril 1 –

Bascule l'image multiple afficher/masquer

Répondre

Questions connexes