切換多個圖像顯示/隱藏

我已經通過CSS觸發一個圖像/顯示隱藏10張，但我不能讓它使用一個以上的工作，因爲標籤元素常見。我嘗試將標籤元素更改爲label1，但它不會工作，我也嘗試向標籤添加一個類，並且無法使其工作。

顯示樹的選中/未選中圖像的第二張圖像是我想要實現的所有10張圖像。

我不確定我可以用CSS做什麼？任何想法，或者如果不是，我需要做什麼jQuery？任何幫助，將不勝感激感謝

這裏是我的代碼：

#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

用CSS你可以使用這樣的事情：

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，它的作品！我upvoted 1 –

切換多個圖像顯示/隱藏

回答

相關問題