CSS实现点击切换图片效果的方法

在CSS中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。

为目标元素添加一个class或者id属性作为选择器。然后通过设置不同状态下的背景图像路径来达到切换图片的效果。

HTML示例代码：

<div class="image-container">
   <img src="zhuige.png" alt="默认图片">
</div>

CSS示例代码：

/* 定义初始状态 */
.image-container {
    background-image: url("zhuige.png"); /* 默认显示的图片 */
}

/* 鼠标悬停时切换图片 */
.image-container:hover {
    background-image: url("zhuigeA.png"); /* 鼠标悬停时显示的图片 */
}

/* 鼠标按下时切换图片 */
.image-container:active {
    background-image: url("zhuigeB.png"); /* 鼠标按下时显示的图片 */
}

上述CSS代码会根据鼠标事件（如悬停、按下）改变background-image属性值，从而实现了点击切换图片的效果。