切换多个图像显示/隐藏

问题描述：

我已经通过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>

答

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

，你需要做的与每张照片。

不知道为什么这个答案从某人downvote，它的作品！我upvoted 1 –

切换多个图像显示/隐藏

相关推荐