css里面li标签怎么加图片_css 点击ul切换其中li标签内的图片

如下图所示，在ul内有两个li标签，一个放图片一个显示文字。现在我希望当鼠标移动到图片上时，图片切换，并且字体颜色改变，点击后任然是这右边的样式。

总之，就是点击后切换样式，当点击其他位置时变成原来的样式。

目前使用了hover和active，只在hover的变化，点击之后鼠标移开样式就没有了，因为active只在鼠标按下时才有用。

我的问题是，如何保持鼠标按下后样式改变，只有在点击其他位置的时候才变回原来的样式呢？必须要给ul写一个onClick事件来改变样式吗？

ul代码

• 
• 数量

less代码.iconContainer ul:nth-child(1):hover{

li:nth-child(1){

background-image: url("./Images/count.png");

box-shadow: 5px 9px 15px 0px

rgba(10, 37, 90, 0.7);

border-radius: 10px;

}

li:nth-child(2){

font-size: 34px;

color:#ffffff;

text-align: center;

margin-top: 20px;

}

}

.iconContainer ul:nth-child(1):active{

li:nth-child(1){

background-image: url("./Images/click-count.png");

box-shadow: 5px 9px 15px 0px

rgba(10, 37, 90, 0.7);

border-radius: 10px;

}

li:nth-child(2){

font-size: 34px;

color:#ffffff;

text-align: center;

margin-top: 20px;

}

}