css 3 点击切换图片

CSS 3 点击切换图片是网站中常用的效果，它可以让页面更加生动，增加用户的互动体验。

要实现这个效果，我们需要用到 CSS 的 :hover 伪类和属性选择器。

首先，我们需要先准备好两张图片：

    <img src="image1.jpg" alt="图片1" class="img1">
    <img src="image2.jpg" alt="图片2" class="img2">

接下来，在 CSS 中我们需要为这两张图片定义不同的样式，并使用属性选择器将其中的一张图片隐藏：

    .img1{
        display: block;
    }

    .img2{
        display: none;
    }

    .img1:hover + .img2{
        display: block;
    }

    .img2:hover + .img1{
        display: block;
    }

在上面的代码中，我们首先定义了 .img1 和 .img2 的样式，将其中一张图片隐藏。然后，使用属性选择器为 .img1 和 .img2 设置鼠标悬停事件，当鼠标悬停在 .img1 上时， .img2 就会显示出来；当鼠标悬停在 .img2 上时， .img1 就会显示出来。

使用这种方式，我们就实现了简单的点击切换图片效果。