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

Question

我有一张图片，当用户点击该图片时，我希望显示在该图片下方的另一张图片。我正在寻找一个简单的仅使用 CSS 的解决方案。

这是否可行？

- L84

---

不可以通过 CSS 来处理点击事件（即 no.click 是一个 event）。但你可以在鼠标悬浮时更改图片。 - naveen

你是想在单击时显示图像并保持可见，还是在每次单击时切换图像？ - Eric

请查看我的建议解决方案，我认为你会喜欢它。 - Eliran Malka

我不确定这篇四年前的帖子是否会被重新挖掘出来。但是，当你只想在鼠标悬停时显示图像时，该怎么做呢？ - Richard Peter Targett

@Sidhartha - 你可以像这样做 img:hover { background: url(/path-to-image/img.jpg); }，或者像下面的答案中提到的那样使用雪碧图。你可以在这里，这里，和这里阅读更多关于鼠标悬停的内容。 - L84

Answer 1

简而言之！

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

---

CSS忍者在他的Futurebox中使用了类似的方法。这是一个基于CSS的灯箱效果。对于这个输入想法点赞。 - feeela

感谢@feeela，很高兴见到你，CSS忍者（哇，他真的把这个提升到了一个新的水平，太棒了。你看到那些Bootstrap插件了吗？）。 - Eliran Malka

当您为输入使用标签时，跨浏览器变得非常容易：http://jsfiddle.net/01cwd1wq/ - Shikkediel

答案的第一部分只适用于基于 Webkit 的浏览器，这只是一个非标准偏差。由于 input 不是具有闭合标签的元素，因此无法具有 after 或 before 伪元素来包含该伪元素。因此，它基本上是不正确的。 - Shikkediel

Answer 2

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

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

我建议将其与CSS雪碧图一起使用：https://css-tricks.com/css-sprites/

- evilpenguin

---

谢谢，看起来这似乎是使用仅CSS解决方案的最佳方式。 - L84

这不允许切换状态（如何在额外的点击上更改图像？），因为“visited”将持续到浏览器缓存被清除。 - Eliran Malka

Answer 3

有些人建议使用“visited”属性，但是访问过的链接会保留在浏览器缓存中，所以下次用户访问页面时，链接将显示第二张图片。我不知道这是否是您想要的效果。无论如何，您可以混合使用JS和CSS：

<style>
.off{
    color:red;
}
.on{
    color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>

使用onclick事件，您可以更改（或切换）元素的类名。在这个例子中，我更改了文本颜色，但您也可以更改背景图片。

祝你好运

- pleasedontbelong

---

该OP要求仅使用CSS解决方案。 - Eliran Malka

Answer 4

尝试以下操作（但一旦点击，就不能撤销）：

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

- nfechner

Answer 5

这引入了一种HTML/CSS的新范例，但使用 <input readonly="true"> 可允许你附加一个 input:focus 选择器，然后修改 background-image。 当然，这需要对 input 应用特定的CSS以覆盖浏览器默认值，但这确实表明可以在不使用Javascript的情况下触发点击操作。

- daleyjem

---

哎？请演示一下。 - Eliran Malka

当然...那么请看这个页面：http://daleyjem.com/sandbox/css-playground.html ... 不用在意时钟，但是第四个菜单项实际上是一个<input/>。 - daleyjem

虽然很有趣，但仍存在一些问题，例如键盘导航怎么办？在某些引擎实现中，文本会在键盘焦点到输入框时被突出显示，这看起来可能不太好。 - Eliran Malka

可以使用<a>标签实际采用的方法，即在CSS中设置a:target {}选择器，并确保您的href（减去井号）与<a>标签的id匹配。 - daleyjem

迷人，喜欢这种方法。+1 - Eliran Malka

上面的链接已经失效了。请尝试使用以下链接作为示例：https://codepen.io/daleyjem/pen/PLBZXO - daleyjem

Answer 6

您可以使用不同状态的链接来显示不同的图像，例如。

您也可以使用相同的图像（CSS 精灵），它合并了所有不同的状态，然后只需通过填充和定位来显示您想要显示的状态。

另一个选择是使用 JavaScript 替换图像，这将为您提供更多的灵活性。

- jasalguero

Answer 7

不，你需要使用脚本来在元素上放置一个“click”事件处理程序，以实现你想要的功能。

• https://developer.mozilla.org/en/DOM/Event
• https://developer.mozilla.org/En/Listening_to_events

- FK82