css图片选中换一张图片

在CSS中，我们可以通过一些伪类来实现图片选中后换一张图片的效果。这个技巧可以用于一些按钮、导航、列表等元素上，增强用户交互性。

首先，我们需要在HTML中添加图片元素，并设置其默认显示的图片：

  <div class="image-btn">
    <img src="image1.jpg" alt="image-1">
  </div>

接着，在CSS中，使用:hover伪类来设置图片选中时的效果，同时使用background-image属性来设置鼠标选中后要显示的图片：

  .image-btn img:hover {
    opacity: 0; /* 隐藏原来的图片 */
  }
  .image-btn img:hover::before {
    content: ""; /* 插入一个伪元素作为背景图片 */
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(image2.jpg);
    background-size: cover;
  }

这里我们使用了一个伪元素来作为鼠标选中后的背景图片，可以让原有的图片元素隐藏掉，显示新的背景图片。

这样，当鼠标移到图片上时，就会自动切换到另一张图片。如果还需要动画效果，可以使用CSS3的transition属性来实现：

  .image-btn img {
    transition: all 0.3s ease-in-out;
  }
  .image-btn img:hover {
    opacity: 0;
  }
  .image-btn img:hover::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(image2.jpg);
    background-size: cover;
    transition: all 0.3s ease-in-out; /* 添加动画效果 */
  }

以上就是使用CSS实现图片选中换一张图片效果的方法。如果需要增加更多的交互效果，也可以使用JavaScript来完成，但这种方法更加简单易用。