Toggle mehrere Bild ein-/ausblenden

I 10 Bilder, die ich wechseln wollen/show hide auf KlickToggle mehrere Bild ein-/ausblenden

ich ein Bild über CSS umgeschaltet haben, aber ich kann es nicht mit mehr als einer, weil das Label-Element an die Arbeit ist üblich. Ich habe versucht, das Label-Element zu Label1 zu ändern, aber es wird nicht funktionieren, ich habe auch versucht, eine Klasse zu dem Label hinzufügen und konnte das nicht funktionieren.

Das zweite Bild, das das eingecheckte/ungeprüfte Bild des Baumes zeigt, möchte ich für alle 10 Bilder erreichen, die ich habe.

Ich bin nicht sicher, ob ich mit CSS kann? Irgendwelche Ideen oder wenn nicht was würde ich auf jquery tun müssen? Jede mögliche Hilfe würde dank geschätzt werden

Hier ist mein 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>

Quelle

2017-10-12 Denise Field

Mit CSS können Sie nur so etwas wie folgt verwenden:

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

Sie tun müssen, das mit jedem Bild.

Quelle

2017-10-12 12:23:01

nicht wissen, warum diese Antwort einen Downvote von jemandem bekommen hat, funktioniert es! Ich habe 1 erhöht –

Toggle mehrere Bild ein-/ausblenden

Antwort

Verwandte Themen