如何使用纯CSS在li当前状态下更改图像onclick？

Question

我想点击对象时将图像更改为其他图像.代码按以下顺序堆叠:

HTML:

<div class="games-platform-item pt-item">
                    <ul class="games-sub-menu clearfix"> 

                            <li class="tab1 current">
                            <img src="../images/abc11.jpg"/ class="topimgG1" ">
                            <span>????</span>
                            </li>

                        <li class="tab2">
                        <img src="../images/abc2.jpg"/ class="topimgG2" ">
                        <span>???</span>
                        </li> 

                        <li class="tab3">
                        <img src="../images/abc3.jpg"/ class="topimgG3" ">
                        <span>????</span>
                        </li>

                        <li class="tab4">
                        <img src="../images/abc4.jpg"/ class="topimgG4" ">
                        <span>????</span>
                        </li>

                        <li class="tab5">
                        <img src="../images/abc5.jpg"/ class="topimgG5" ">
                        <span>???</span>
                        </li>    

                        <li class="tab6">
                        <img src="../images/abc6.jpg"/ class="topimgG6" ">  
                        <span>????</span>
                        </li>    

                        <li class="tab7">
                        <img src="../images/abc7.jpg"/ class="topimgG7" ">
                        <span>????</span>
                        </li>     

                        <li class="tab8 games-pt-search" style="display:none;"><span>????</span></li>
                    </ul>

我想做的是:

我希望在图像点击时将图像更改为彩色版本的图像,即其他图像.现在,我知道我可以使用jquery/JS来完成它.但我不想要大量的JS代码来完成这么简单的事情.可以用更简单的东西来完成吗？就像CSS中的.current一样

我似乎无法想到它.

CSS:

Answer 1

这是基本想法。通过使用 CSS sprites 可以极大地改进它。使用精灵还可以消除加载点击图像时的延迟。有关 CSS Sprites 的介绍，请参阅：https ://css-tricks.com/css-sprites/

\n\n

我在这里没有使用精灵，因为它们很难使用我在图像中使用的 palceholdit 来模拟。

\n\n

继续看代码。之后我将概述它的用途和主要功能。

\n\n

\r\n

\r\n

/*Hide the Radio Button*/\r\n.games-sub-menu input[type=radio] {\r\n  display: none\r\n}\r\n\r\n/*Set a box for the label, this is what is clicked on*/\r\n.games-sub-menu label {\r\n  display: block;\r\n  width: 150px;\r\n  height: 100px;\r\n}\r\n\r\n/*Set Images...this would work better with sprites*/\r\n.games-sub-menu label.topimgG1 {\r\n  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");\r\n}\r\n.games-sub-menu input[type=radio]:checked + label.topimgG1 {\r\n  background-image: url("http://placehold.it/150x100/?text=Image1");\r\n}\r\n.games-sub-menu label.topimgG2 {\r\n  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");\r\n}\r\n.games-sub-menu input[type=radio]:checked + label.topimgG2 {\r\n  background-image: url("http://placehold.it/150x100/?text=Image2");\r\n}

\r\n

<div class="games-platform-item pt-item">\r\n  <ul class="games-sub-menu clearfix">\r\n    <li class="tab1 current">\r\n      <input type="radio" name="imgSwap" id="rdoImg1">\r\n      <label class="topimgG1" for="rdoImg1"></label>\r\n      <span>\xe7\xbc\x96\xe8\xbe\x91\xe7\xb2\xbe\xe9\x80\x89</span>\r\n    </li>\r\n    <li class="tab2 current">\r\n      <input type="radio" name="imgSwap" id="rdoImg2">\r\n      <label class="topimgG2" for="rdoImg2"></label>\r\n      <span>\xe7\xbc\x96\xe8\xbe\x91\xe7\xb2\xbe\xe9\x80\x89</span>\r\n    </li>\r\n  </ul>\r\n</div>

\r\n

\r\n

\r\n

\n\n

基本上，这里发生的是隐藏的单选按钮正在维护图像的状态。从那里，我们将checkedCSS 选择器与相邻的同级选择器结合使用+来更改标签的背景图像。重要提示：复选框必须紧接在标签之前。您可以使用通用同级选择器，但复选框仍必须位于标签之前。

\n\n

radio如果选项不是相互排斥的，您也可以替换为复选框。

\n\n

您还可以使用页面上 ID 的链接并利用:target选择器来获得类似的结果。但这会引入页面跳转。

\n\n

我的一些答案使用类似的概念：

\n\n

\n
• 如何编辑此导航以使其成为点击导航而不是悬停导航？
\n
• 默认情况下打开所有 css 手风琴 div（无 jquery）
\n
• /sf/answers/2108092381/
\n

\n