Question

我有10张想要切换/显示隐藏的图片

我已经通过CSS切换了一个图像，但由于标签元素很常见，我无法使用多个图像。我尝试将label元素更改为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>

Answer 1

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

每张照片都需要这样做。

切换多个图像显示/隐藏

1 个答案: