我有一张图片，当点击该图片时，我想在其下方显示另一张图片。我正在寻找一个简单的纯 CSS 解决方案。
这可能吗？
【问题讨论】：
event 和 CSS 无法帮助您。您可以在悬停时更改图像。
input[type="checkbox"] {
content: url('http://placekitten.com/200/210');
appearance: none;
display: block;
width: 200px;
height: 200px;
}
input[type="checkbox"]:checked {
content: url('http://placekitten.com/210/220');
}<input type="checkbox" />复选框输入是用于实现切换功能的本机元素，我们可以利用它来获益。
利用 :checked 伪类 - 将其附加到复选框的伪元素（因为您不能真正影响 input 本身的背景），并相应地更改其背景。
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
这里有一个full working demo on jsFiddle 来说明这种方法。
这有点麻烦，我们可以做一些改变来清理不必要的东西；因为我们并没有真正应用背景图像，而是设置元素的content，所以我们可以省略伪元素并直接在复选框上设置。
诚然，它们在这里没有任何实际用途，只是掩盖了复选框的本机呈现。我们可以简单地删除它们，但在最好的情况下会导致 FOUC，或者如果我们无法获取图像，它只会显示一个巨大的复选框。
输入appearance属性：
(-moz-)appearanceCSS 属性用于...显示一个元素 使用基于操作系统主题的平台原生样式。
我们可以通过分配appearance: none 来覆盖平台原生样式并完全绕过该故障（我们必须自然地考虑供应商前缀，并且任何地方都不支持无前缀形式 ， 眼下）。然后简化了选择器，代码更加健壮。
input[type="checkbox"] {
content: url('images/black.cat');
display: block;
width: 200px;
height: 200px;
-webkit-appearance: none;
}
input[type="checkbox"]:checked {
content: url('images/white.cat');
}
再次，live demo of the refactored version is on jsFiddle。
注意：目前这仅适用于 webkit，我正在尝试将其修复为 gecko 引擎。一旦我发布更新版本。
更新：appearance 属性现在是 widely adopted，因此使用供应商前缀是多余的。万岁！
【讨论】：
input 不能有 after 或 before 伪，因为它不是带有结束标签的元素，需要包含所述伪元素。所以基本上是不正确的。
您可以使用具有不同样式的<a> 标签：
a:link { }
a:visited { }
a:hover { }
a:active { }
我建议将它与 CSS 精灵结合使用：https://css-tricks.com/css-sprites/
【讨论】：
visited 将持续存在，直到清除浏览器缓存。
试试这个（但一旦点击，就无法恢复）：
HTML：
<a id="test"><img src="normal-image.png"/></a>
CSS：
a#test {
border: 0;
}
a#test:visited img, a#test:active img {
background-image: url(clicked-image.png);
}
【讨论】：
这为 HTML/CSS 引入了一个新范例，但使用 <input readonly="true"> 将允许您附加一个 input:focus 选择器，然后更改 background-image
这当然需要对 input 本身应用特定的 CSS 以覆盖浏览器默认设置，但它确实表明点击操作确实可以在不使用 Javascript 的情况下触发。
【讨论】：
<input/>
有些人建议“已访问”，但访问过的链接仍保留在浏览器缓存中，因此下次您的用户访问该页面时，该链接将具有第二张图片..我不知道这是您想要的效果想。无论如何，您可以混合使用 JS 和 CSS：
<style>
.off{
color:red;
}
.on{
color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>
使用 onclick 事件，您可以更改（或切换？）元素的类名。在此示例中，我更改了文本颜色，但您也可以更改背景图像。
祝你好运
【讨论】：
你可以为不同的图片使用链接的不同状态example
您也可以使用相同的图像 (css sprite)，它结合了所有不同的状态，然后只需使用填充和位置来仅显示您想要显示的那个。
另一种选择是使用 javascript 来替换图像，这会给你更多的灵活性
【讨论】：
不，您需要编写脚本来在 Element 上放置一个 click Event 处理程序，以执行您想要的操作。
【讨论】：