如何单独使用CSS单击更改图像颜色？

Question

我有一个图像，当lispan被选中时，我想改变图像的颜色相同的下面的单词。

我正在寻找一个简单的CSS解决方案。

这可能吗？

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：

Answer 1

有麻木呃你可以这样做的方式： 1）创建每个是高亮颜色的重复图像，然后使用css，您可以根据列表项是否具有“当前值”来显示或隐藏“默认”或“高亮显示”图像'上课还是不上课。

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

2）使用背景图像代替并创建包含所有这些图像（默认的，并强调1个图像子画面），并且类似于上面的例子中，当列表项是电流变化背景位置。

.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）使用字体图标而不是图像，然后它就会改变当前图像的颜色。

字体真棒很受欢迎，看看。 http://fontawesome.io/

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

个人而言，我会选择选项＃3，如果可能的是最简单的维护和更改。选项＃2也很好，但它可能是乏味和痛苦的维护。不建议选项1，虽然它很容易实现，但它可能是最慢的性能。

Answer 2

我认为这将解决您的问题，利用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 3

这里检查 http://www.w3schools.com/cssreF/sel_active.asp 当您单击只是让你想要的颜色另一个图标。点击它触发css以不同颜色显示新图像