Question

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

这可能吗？

Answer 1

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

演示

这是一个full working demo on 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');
}

演示

再次，live demo of the refactored version is on jsFiddle。

参考

注意：这只适用于webkit现在，我正在尝试为gecko引擎修复它。我会在发布更新后的版本。

Answer 2

您可以使用不同风格的<a>代码：

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

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

Answer 3

试试这个（但一旦点击，它就不可逆）：

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

Answer 4

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

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

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

祝你好运

Answer 5

这引入了HTML / CSS的新范例，但使用<input readonly="true">可以添加input:focus选择器，然后更改background-image

这当然需要将特定的CSS应用于input本身以覆盖浏览器默认值，但它确实表明可以在不使用Javascript的情况下触发点击操作。

Answer 6

您可以为不同的图片example

使用链接的不同状态

你也可以使用相同的图像（css sprite），它结合了所有不同的状态，然后只使用填充和位置来显示你想要显示的那个。

另一种选择是使用javascript替换图像，这将为您提供更大的灵活性

Answer 7

不，您需要使用脚本来在click上放置Event Element处理程序，以执行您想要的操作。

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

7 个答案:

纯CSS解决方案

抽象

实施

演示

重构

实施

演示

参考