css触摸图片其他地方出现新图片代码

您好，以下是一个简单的示例代码，实现在触摸图片时，显示一个新图片：

HTML代码：

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
  <img src="new-image.jpg" alt="New Image" class="hidden">
</div>

CSS代码：

.image-container {
  position: relative;
}

.hidden {
  display: none;
}

.image-container:hover img:first-child {
  opacity: 0.5;
}

.image-container:hover img:last-child {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

解释：

1. 通过将两个图片放在同一个 div 容器中，实现在触摸图片时显示新图片。

2. 为了实现图片的交替显示，我们将第二个图片的 class 设置为 "hidden"，以隐藏它。

3. 当鼠标悬停在 div 容器上时，我们通过使用 :hover 伪类选择器，将第一个图片的不透明度降低，同时将第二个图片的 display 设置为 block，以显示它。

4. 为了确保第二个图片与第一个图片重叠，我们将第二个图片的 position 设置为 absolute，并将其 top 和 left 值都设置为 0。

请注意，这只是一个简单的示例代码，您可以根据自己的需要进行调整和修改。