How to change an image onclick while li on current status using pure CSS?

Question

I want to change an image to some other image when i click on the object. the code is stacked in the following order:

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>

What i wish to do is :

i want to change the image to a colored version of the image when it onclick, ie, some other image. Now, I know i can use jquery/JS to accomplish it. But i dont want a huge amount of JS code to accomplish something so simple. Can it be done using something simpler? Like .current in CSS

I cannot seem to think of it.

CSS :

Answer 1

Here is the basic idea. It can be improved immensly by using CSS sprites. Using sprites will also iliminate the delay in loding the on click image. For an introduction to CSS Sprites see: https://css-tricks.com/css-sprites/

I haven't used sprites here as they are hard to emulate usind palceholdit, which I have used for the image.

On to the code. I will outline what it does and key features after.

/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
  display: none
}

/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
  display: block;
  width: 150px;
  height: 100px;
}

/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <input type="radio" name="imgSwap" id="rdoImg1">
      <label class="topimgG1" for="rdoImg1"></label>
      <span>编辑精选</span>
    </li>
    <li class="tab2 current">
      <input type="radio" name="imgSwap" id="rdoImg2">
      <label class="topimgG2" for="rdoImg2"></label>
      <span>编辑精选</span>
    </li>
  </ul>
</div>

Basically what is going on here is the hidden radio button is maintaining the state of the image. From there we use the checked CSS selector in conjuntion with the adjacent sibling selector + to chanage the background image of the label. Important Note the check box must come immediately before the label. You could use the general sibling selector, but the check box must still come before the label.

You could also replace radio with checkbox if the choices aren't mutually exclusive.

You could also achive a similar result using links to an id on the page, and utilize the :target selector. But this would introduce a page jump.

Some of my answers that use similar concepts:

• How to edit this nav to make it a click nav instead of a hover nav?
• All css accordion divs open by default (no jquery)
• https://stackoverflow.com/a/30115605/4665