Question

我有一张图片，当li在span上被选中时，我想要改变图像的颜色，就像它下面的单词一样。

我正在寻找一个简单的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个图像精灵，类似于上面的示例，当列表项是当前更改背景位置时。

.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以使用不同颜色的新图像显示图像

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

3 个答案: