How to change an image color once on click using CSS alone?

Question

I have an image and when the li on span being selected I want to change the color of image same as the word below it.

I am looking for a simple CSS only solution.

Is that possible?

HTML:

<div class="games-panes fr">
<!-- PT游戏厅 -->
<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>
<div class="search-wrap clearfix"><input type="text" id="pt-keyword" placeholder="PT游戏搜索" /><a href="javascript:void(0);" onclick="pt_search();"></a></div>

CSS:

.games-sub-menu li {
    float: left;
    display: inline;
    cursor: pointer;
    height: 20px;
    line-height: 50px;
    padding: 0 38px;
    margin: 24px 0;
    border-right: 1px solid #f1f1f1;
    font-size: 14px;
    color: #838383;
    transition: all 0.25s ease-in 0s;
}
.mg-item .games-sub-menu li {
    padding: 0 12px;
    font-size: 13px;
}
.bb-item .games-sub-menu li {
    padding: 0 23px;
}
.games-sub-menu li:hover,
.games-sub-menu li.current {
    color: #3385ff;
}

IMAGE being selected :

Answer 1

I think it will solve your problem, make use of css filter

.games-sub-menu li.current
{
 color:#3385ff;
 filter:sepia() contrast(200%) hue-rotate(150deg);
 -webkit-filter:sepia() contrast(200%) hue-rotate(150deg);
}

.games-sub-menu li{float:left;display:inline;cursor:pointer;height:20px;line-height:50px;padding:0 38px;margin:24px 0;border-right:1px solid #f1f1f1;font-size:14px;color:#838383;transition:all 0.25s ease-in 0s; }
.mg-item .games-sub-menu li{padding:0 12px;font-size:13px;}
.bb-item .games-sub-menu li{padding:0 23px;}
.games-sub-menu li:hover,
.games-sub-menu li.current{color:#3385ff;filter:sepia() contrast(200%) hue-rotate(150deg);
-webkit-filter:sepia() contrast(200%) hue-rotate(150deg);}

<div class="games-panes fr">
                <!-- PT游戏厅 -->
                <div class="games-platform-item pt-item">
                    <ul class="games-sub-menu clearfix">

                        <li class="tab1 current">
                        <img src="http://dermavision.in/images/image-gallery-icon-small.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>
                    <div class="search-wrap clearfix"><input type="text" id="pt-keyword" placeholder="PT游戏搜索" /><a href="javascript:void(0);" onclick="pt_search();"></a></div>

Answer 2

check here http://www.w3schools.com/cssreF/sel_active.asp when you click just make another icon with the color you want. On click it trigger css to show the image with new image with different color

Answer 3

There are a number of ways you can do this: 1) Create a duplicate image of each that is the highlight colour and then using css you can show or hide the 'default' or 'highlighted' image based on whether the list item had the 'current' class or not.

li .hightlight { display:none; }
li.current .default { display:none; }
li.current .highlight { display: inline-block }

2) Use background images instead and create 1 image sprite that contains all of these images (default and highlighted) and similar to the above example, when the list item is current change the background-position.

.games-sub-menu li {background:transparent url(path-to-image) no-repeat 0 0;width:20px;height:20px;}
.games-sub-menu li.tab1 {background-position:0 0;}
.games-sub-menu li.current.tab1 {background-position:0 -20px;}

3) Use font icons instead of images, and then it would just be the case of changing the colour of the current image.

Font awesome is very popular, take a look. http://fontawesome.io/

.games-sub-menu li {color:black}
.games-sub-menu li.current {color:blue}

Personally i would choose option #3 if possible as it is the easiest to maintain and make changes to. Option #2 is good also but it can be tedious and a pain to maintain. Option #1 isn't advised and although it's pretty easy to implement it's probably the slowest performance-wise.