如何在不使用 JavaScript 的情况下通过点击在两个图像之间切换

Question

在 HTML 文档中，我有 <img src="cat-thumbnail.jpg">。当用户点击图像时，我想显示另一个图像：<img src="cat-full.jpg">。用户应该能够通过单击图像在这两个图像之间切换。不使用 JavaScript 是否可以做到这一点？如果可以，怎么做？

编辑：
这是有问题的 HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Cat image</h1>
    <img src="cat-thumbnail.jpg">
    <!-- <img src="cat-full.jpg"> -->
  </body>
</html>

Answer 1

我找到了一个没有 JavaScript 的解决方案：

HTML:

<label>
  <input class="image-toggler" type="checkbox">
  <img class="thumbnail" src="cat-thumbnail.jpg">
  <img class="full" src="cat-full.jpg" loading="lazy">
</label>

CSS:

/* Hide checkbox */
input.image-toggler {
  display: none;
}

/* When checkbox is unchecked, show thumbnail and hide full image */
img.full {
  display: none;
}

/* When checkbox is checked, hide thumbnail and show full image */
input.image-toggler:checked + img.thumbnail {
  display: none;
}

input.image-toggler:checked + img.thumbnail + img.full {
  display: block;
}

取消选中隐藏复选框时显示缩略图，选中隐藏复选框时显示完整图像。 loading="lazy" 用于延迟完整图像的加载，直到用户需要它，但它不是标准属性。

如何在不使用 JavaScript 的情况下通过点击在两个图像之间切换

How to toggle between two images on click without using JavaScript

html

css

css-selectors