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

Question

我有一张图片，当选中 li 时，我希望更改图片的颜色与其下方的单词相同。

我正在寻找一个简单的仅使用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;
}

所选图像：

- Morgan Ng

---

“可以做到”，但是你需要制作一个精灵图像。 - vivekkupadhyay

Answer 1

以下是几种实现方法： 1）创建每个图像的副本，高亮颜色，并使用css根据列表项是否具有“current”类来显示或隐藏“默认”或“高亮”图像。

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

2）使用背景图像，创建一个包含所有这些图像（默认和突出显示）的图像精灵，类似于上面的示例，当列表项为当前项时更改背景位置。

.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）使用字体图标而不是图片，这样只需要更改当前图像的颜色即可。

Font Awesome非常流行，请查看。 http://fontawesome.io/

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

如果可能的话，我个人会选择选项#3，因为它最容易维护和更改。选项#2也不错，但维护起来可能会很繁琐。不建议选择选项#1，尽管它实现起来相当容易，但在性能方面可能是最慢的。

- partypete25

Answer 2

在这里检查 http://www.w3schools.com/cssreF/sel_active.asp 当你点击时，只需制作另一个带有所需颜色的图标。 点击它会触发 CSS 显示具有不同颜色的新图像

- user5686565

Answer 3

我认为这会解决你的问题，可以利用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>

- Kumar

---

嗨，我觉得你误解了我的请求。我想让图片变成像图像下面的单词一样的蓝色。 - Morgan Ng

尝试在Chrome上运行它，如果您想在Mozilla上运行，则可以使用filter:url('＃sepia')过滤器。 - Kumar