Html 如何仅使用 CSS 在单击时更改图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6813699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change an image on click using CSS alone?
提问by L84
I have an image and when the image is clicked I want to reveal another image below it. I am looking for a simple CSS only solution.
我有一张图片，当点击图片时，我想在它下面显示另一张图片。我正在寻找一个简单的 CSS 解决方案。
Is that possible?
那可能吗？
采纳答案by evilpenguin
You could use an <a>tag with different styles:
您可以使用<a>具有不同样式的标签：
a:link { }
a:visited { }
a:hover { }
a:active { }
I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/
我建议将它与 CSS 精灵结合使用：https: //css-tricks.com/css-sprites/
回答by Eliran Malka
A Pure CSS Solution
纯 CSS 解决方案
Abstract
抽象的
A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.
复选框输入是用于实现切换功能的本机元素，我们可以利用它来获得好处。
Utilize the :checkedpseudo class - attach it to a pseudo element of a checkbox (since you can't really affect the background of the inputitself), and change its background accordingly.
利用:checked伪类 - 将其附加到复选框的伪元素（因为您无法真正影响其input本身的背景），并相应地更改其背景。
Implementation
执行
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');
}
Demo
演示
Here's a full working demo on jsFiddleto illustrate the approach.
这是一个关于 jsFiddle的完整工作演示来说明该方法。
Refactoring
重构
This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we're not really applying a background image, but instead setting the element's content, we can omit the pseudo elements and set it directly on the checkbox.
这有点麻烦，我们可以做一些改变来清理不必要的东西；因为我们并不是真正应用背景图像，而是设置元素的content，我们可以省略伪元素并直接在复选框上设置它。
Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.
诚然，它们在这里没有真正的用途，只是为了掩盖复选框的本机渲染。我们可以简单地删除它们，但这在最好的情况下会导致 FOUC，或者如果我们无法获取图像，它只会显示一个巨大的复选框。
Enters the appearanceproperty:
进入appearance属性：
The
(-moz-)appearanceCSS property is used ... to display an element using a platform-native styling based on the operating system's theme.
该
(-moz-)appearanceCSS属性用来...显示使用基于操作系统的主题平台，原生样式的元素。
we can override the platform-native styling by assigning appearance: noneand bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.
我们可以通过appearance: none完全分配和绕过该故障来覆盖平台原生样式（我们自然必须考虑供应商前缀，并且目前任何地方都不支持无前缀形式）。然后简化了选择器，代码更加健壮。
Implementation
执行
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');
}
Demo
演示
Again, a live demo of the refactored version is on jsFiddle.
同样，重构版本的现场演示在 jsFiddle 上。
References
参考
Note:this only works on webkit for now, I'm trying to have it fixed for gecko engines also. Will post the updated version once I do.
注意：这目前只适用于 webkit，我也在尝试将它修复为壁虎引擎。一旦我这样做，将发布更新版本。
回答by nfechner
Try this (but once clicked, it is not reversible):
试试这个（但一旦点击，它是不可逆的）：
HTML:
HTML：
<a id="test"><img src="normal-image.png"/></a>
CSS:
CSS：
a#test {
border: 0;
}
a#test:visited img, a#test:active img {
background-image: url(clicked-image.png);
}
回答by pleasedontbelong
some people have suggested the "visited", but the visited links remain in the browsers cache, so the next time your user visits the page, the link will have the second image.. i dont know it that's the desired effect you want. Anyway you coul mix JS and CSS:
有些人建议使用“已访问”，但已访问的链接仍保留在浏览器缓存中，因此下次您的用户访问该页面时，该链接将显示第二张图片.. 我不知道这是您想要的效果。无论如何，你可以混合使用 JS 和 CSS：
<style>
.off{
color:red;
}
.on{
color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>
using the onclick event, you can change (or toggle maybe?) the class name of the element. In this example i change the text color but you could also change the background image.
使用 onclick 事件，您可以更改（或切换？）元素的类名。在本例中，我更改了文本颜色，但您也可以更改背景图像。
Good Luck
祝你好运
回答by daleyjem
This introduces a new paradigm to HTML/CSS, but using an <input readonly="true">would allow you to append an input:focusselector to then alter the background-image
这为 HTML/CSS 引入了一种新的范式，但使用 an<input readonly="true">将允许您附加一个input:focus选择器，然后更改background-image
This of course would require applying specific CSS to the inputitself to override browser defaults but it does go to show that click actions can indeed be triggered without the use of Javascript.
这当然需要将特定的 CSS 应用于input自身以覆盖浏览器默认值，但它确实表明点击操作确实可以在不使用 Javascript 的情况下触发。
回答by jasalguero
You can use the different states of the link for different images example
您可以将链接的不同状态用于不同的图像示例
You can also use the same image (css sprite) which combines all the different states and then just play with the padding and position to show only the one you want to display.
您还可以使用组合所有不同状态的相同图像 ( css sprite)，然后仅使用填充和位置来仅显示您想要显示的图像。
Another option would be using javascript to replace the image, that would give you more flexibility
另一种选择是使用 javascript 来替换图像，这会给你更大的灵活性
回答by FK82
No, you will need scripting to place a clickEventhandler on the Elementthat does what you want.
不，您将需要编写脚本来将clickEvent处理程序放置在Element执行您想要的操作上。
