如何单独使用 CSS 在点击时更改图像？

Question

我有一张图片，当点击图片时，我想在其下方显示另一张图片。我正在寻找一个简单的纯 CSS 解决方案。

那可能吗？

原文由 L84 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用不同样式的 <a> 标签：

 a:link    { }
a:visited { }
a:hover   { }
a:active  { }

我建议将它与 CSS sprites 结合使用： https ://css-tricks.com/css-sprites/

原文由 evilpenguin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

长话短说！

 input[type="checkbox"] {
    content: url('http://placekitten.com/150/160');
    appearance: none;
    display: block;
    width: 150px;
    height: 150px;
}

input[type="checkbox"]:checked {
    content: url('http://placekitten.com/170/180');
}

 <input type="checkbox" />

---

纯 CSS 解决方案

抽象的

复选框输入是用于实现切换功能的本机元素，我们可以利用它来为我们带来好处。

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

演示

这是 jsFiddle 上的完整工作演示， 用于说明该方法。

重构

这有点麻烦，我们可以做一些改变来清理不需要的东西；因为我们并没有真正应用背景图像，而是设置元素的 content ，我们可以省略伪元素并将其直接设置在复选框上。

不可否认，它们在这里没有任何实际用途，只是为了掩盖复选框的本机呈现。我们可以简单地删除它们，但在最好的情况下这会导致 FOUC，或者如果我们无法获取图像，它只会显示一个巨大的复选框。

输入 appearance 属性：

(-moz-)appearance CSS 属性用于……使用基于操作系统主题的平台原生样式显示元素。

我们可以通过分配 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');
}

演示

同样， 重构版本的现场演示在 jsFiddle 上。

参考

• :checked
• -moz-appearance / -webkit-appearance

注意： 这目前只适用于 webkit，我也在尝试为 gecko 引擎修复它。一旦我这样做，将发布更新版本。

_更新： appearance 属性现在 被广泛采用，因此使用供应商前缀是多余的。万岁！_

原文由 Eliran Malka 发布，翻译遵循 CC BY-SA 4.0 许可协议