css中怎么点击切换图片

CSS实现点击切换图片效果已经非常流行了。通过一些简单的CSS代码，你就能够实现一个比较漂亮的点击切换图片效果。下面，我就来给大家介绍一下，怎么样用CSS来实现点击切换图片的功能。

HTML代码：
<div class="img-box">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

CSS代码：
.img-box {
  position: relative;
}
.img-box img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-box img:first-child {
  display: block;
}

.img-box:hover img {
  display: block;
}

.img-box:hover img:first-child {
  display: none;
} 

上面的代码中，“img-box”是一个DIV容器，用于包含三张图片。我们给图片设置了一些CSS样式，让它们默认情况下不显示（display:none;）。然后，我们给第一张图片（img:first-child）设置了一个display:block;样式，使其默认显示出来。

当我们鼠标悬停在“img-box”容器上的时候，我们就会显示所有的图片。同时，我们会通过“img-box:hover img:first-child”样式，隐藏第一张图片，从而实现切换图片的效果。

如果你想要悬停在图片上时，显示的图片和初始显示的图片不一样，你可以修改“img-box:hover img:first-child”样式中的“first-child”，来改变默认显示的图片。

综上所述，通过一些简单的CSS代码，我们就能够实现点击切换图片的效果。这种方法简单易用，适用于许多场景，希望对大家有所帮助。