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


Tags: jquery,html,css

Problem :

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 :



Solution :

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:


    CSS Howto..

    How to adjust Capybara finders on a site using css-modules?

    Jquery: How to find if element has inline property (not in CSS)

    How put div element to bottom of another div element

    How can i make each div look like seperate block?

    How to make table td take the width of its content

    How to create an highlight animation when a control gets focused [closed]

    How to resize image according from screen resolution on html css

    How to recreate eBay New Logo Page in HTML + CSS

    How do I append jumping dots to a text in html and css

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How to make hover use border-radius first-child

    how to swap div with one another in mobile view css

    Show a sentence with animation

    CSS: How to make selectable boxes?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How to hide all checkboxes using CSS

    How do I get this HTML canvas animation to appear on top of my image?

    How to set the box width same as the screen width?

    How to auto adjust parent DIV height according to the contents in child DIV?

    How to refer to css file in codeigniter? 2.0

    How to debug CSS with Firebug for an element that only appears when clicked?

    How to Convert this Inline CSS to External CSS using just a single class?

    How to create two containers within a row that responsively keep equal heights?

    How to make interactive logo design without flash?

    How to style the values in a textfield using CSS?

    How to make an image follows scrolling until a certain point

    How can I exclude some images from being preloaded

    How to center two blocks with some gap inbetween using CSS?

    How to put all css files in one file and all javascript files in one file

    How to prevent div become two rows?