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 can I transcend my confusion over CSS?

    How does CSS works under the hood? [closed]

    How to add a new rule to an existing CSS class

    How to float a word next to animated text

    How to determine when document has loaded after loading external css

    css - How to remove padding next to adjacent links?

    How to apply !important using .css()?

    How to hide autofill safari icon in input field

    How do I center the twitter bootstrap tabs on the page?

    how to achieve following using css ( digits input )

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles

    How to preserve CSS using iTextSharp?

    How to cancel a CSS style set by 'hover child' selector on event?

    How to set HTML element's margin using percent of page height?

    How is this font face in CSS3 embedded into a css file?

    How to implement conditional CSS in this situation?

    How to set CSS on body tag to rotate a page using JavaScript

    How to get Jsfiddles working on a website? [duplicate]

    How to make a double color single border using css?

    How to apply CSS to td of particular table using Classname? [duplicate]

    How i can force my div to display in block?

    How to show hidden div in the same line as the paragraph text?

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to make a box expand a distance from the sides

    how to change the height of a div dynamically based on another div using css?

    How to use a Video as text background in css

    How to style Flipview as inline-block?

    How to keep block elements inline and also correctly centered?

    How can I generate a random color with Stylus CSS?