如何通过单击“仅使用”来更改图像 CSS?

我有一个图像，当你按下它时，我想看到它下面的另一个图像。 我正在寻找一个简单的解决方案 CSS only.

是否有可能？
2021-03-23 添加评论
分享

没有找到相关结果

    已邀请:

    帅驴

    赞同来自:

    纯灰浆 CSS

    抽象的

    复选框输入是用于实现交换机功能的本机元素，我们可以以自己的利益使用它。

    使用伪课
    :checked

    - 体验到伪元素 checkbox /因为你不能真正影响背景本身
    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'/;
    
}


    示范

    这里

    http://jsfiddle.net/eliranmal/DwArh/
    为了说明这种方法。

    重构

    这有点繁琐，我们可以做出一些改变 , 清除不必要的事情; 由于我们实际上不应用背景图像，而且我们安装元素
    content

    , 我们可以省略伪元素并直接安装它 checkbox.

    根据入学，他们在这里没有任何真正的目标，除了掩盖本机渲染 checkbox. 我们可以简单地删除它们，但它会导致 FOUC 最多，或者如果我们无法获得图像，它就会显示出巨大的 checkbox.

    追求所有权
    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'/;
    
}


    示范

    再次，

    http://jsfiddle.net/eliranmal/2rwnz/
    .

    建议书

    https://developer.mozilla.org/ ... ecked
    https://developer.mozilla.org/ ... rance

    笔记：

    虽然它仅适用于WebKit，但我正在尝试修复它和发动机 gecko. 我会尽快发布更新的版本。
    2021-03-23 0 0
    分享

    冰洋

    赞同来自:

    您可以使用标记
    <a>

    具有不同的风格：


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


    我建议将它结合使用 CSS Spritami：
    https://css-tricks.com/css-sprites/
    /
    </a>
    2021-03-23 0 0
    分享

    郭文康

    赞同来自:

    有些人建议 "visited", 但访问的链接仍然在浏览器的缓存中，因此下次用户访问页面时，链接将有第二个图像 ... 我不知道这是你想要的所需效果。 无论如何，你可以混合 JS 和 CSS:


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


    使用事件 onclick, 你可以改变 /还是切换？/ 元素类的名称。 在此示例中，我更改文本的颜色，但也可以更改背景图像。

    祝你好运
    2021-03-23 0 0
    分享

    八刀丁二

    赞同来自:

    尝试 /但按下按钮后，这是不可逆转的。/:

    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/;
    
}
    2021-03-23 0 0
    分享

    詹大官人

    赞同来自:

    这引入了一个新的范式 HTML/CSS,, 但是使用
    <input readonly="true"/>

    允许您添加选择器
    input:focus

    , 然后改变
    background-image


    当然，这将需要使用特定的 CSS 给他自己
    input

    , 要覆盖默认浏览器设置，但实际上显示了在不使用的情况下可以真正引起单击操作 Javascript.
    2021-03-23 0 0
    分享

    君笑尘

    赞同来自:

    您可以为不同的图像使用不同的参考状态。
    http://csscreator.com/node/28450
    您也可以使用相同的图像。 /
    http://css-tricks.com/158-css-sprites/
    /, 它结合了所有不同的状态，然后刚刚玩填充和位置，以显示您要显示的内容。

    另一种选择 javascript 要更换图像，这将为您提供更大的灵活性。
    2021-03-23 0 0
    分享

    龙天

    赞同来自:

    不，你需要一个脚本来放置处理程序
    click


    Event

    在
    Element

    , 这是你想要的。

    https://developer.mozilla.org/en/DOM/Event
    https://developer.mozilla.org/ ... vents
    2021-03-23 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved