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

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

演示

这是一个关于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');
}

演示

同样,重构版本的现场演示在jsFiddle上.

参考

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

注意:这仅适用于webkit,我正在尝试将它固定为gecko引擎.我会发布更新版本.

Answer 2

您可以使用<a>具有不同样式的标记:

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

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

Answer 3

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

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

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

祝你好运