javascript - How to switch the sprite image and font color by clicking on the navigation?

Question

As shown in the picture, but there are four pages in the picture. What I want to do now is click on the icon and change the font color on a page.

Then the icon is made of sprite

The following is a screenshot of the code, mainly for the Sprite image

Answer 1

background-position Change the background position and make two sets, one is gray and the other is colored

Just use color to make the font

In addition, if you don’t want to use two sets of pictures, you can use css mask, but the compatibility is not very good

Now that you have written a set of background-position classes, just switch the classes

Answer 2

$(".sctop li").click(function(){
        $(this).addClass("hover").siblings().removeClass("hover")
        var index = $(this).index();
        $(".spp .sp1:eq("+ index +")").css("height","auto").siblings().css("height","0px");
})

Please refer to this