html - 如何仅使用 CSS 在点击时更改图像颜色？

Question

我有一张图片，当 span 上的 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;
}

正在选择图像:

Answer 1

有多种方法可以做到这一点:1) 为每个高亮颜色创建一个副本图像，然后使用 css，您可以根据列表项是否具有“当前”类来显示或隐藏“默认”或“高亮”图像。

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

2) 改为使用背景图像并创建 1 个包含所有这些图像(默认和突出显示)的图像 Sprite ，并且类似于上面的示例，当列表项为当前时更改背景位置。

.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，尽管它很容易实现，但从性能 Angular 来看，它可能是最慢的。