HTML中同一张图片能否根据鼠标悬停切换资源？仅用HTML和CSS如何实现

失效原因说明 #

src是HTML<img>标签的原生属性，CSS不支持直接修改HTML属性值，因此你写的img:hover {src=""}规则不会生效。仅用HTML+CSS可以通过以下几种方案实现悬停时的图片变化效果：

方案1：背景图切换（最常用，实现简单） #

将图片设置为块级元素的背景，悬停时替换背景图地址即可：

代码示例 #

<!-- HTML部分 -->
<div class="img-box"></div>

/* CSS部分 */
.img-box {
  /* 替换为你的图片实际宽高 */
  width: 300px;
  height: 200px;
  /* 替换为默认状态的图片地址 */
  background-image: url("./default-img.png");
  background-size: cover;
  background-position: center;
  /* 加过渡动画让切换更自然 */
  transition: all 0.3s ease;
}
.img-box:hover {
  /* 替换为悬停状态的图片地址 */
  background-image: url("./hover-img.png");
}

如果不需要完全换图，只是要小幅视觉变化，也可以直接在hover中加变形/滤镜效果，比如：

.img-box:hover {
  /* 放大3% + 向上偏移2px + 提高10%亮度 */
  transform: scale(1.03) translateY(-2px);
  filter: brightness(1.1);
}

方案2：双图叠加切换（适合必须用<img>标签的场景） #

把两张图片叠放在同一个容器内，默认隐藏悬停状态的图，悬停时切换透明度即可：

代码示例 #

<!-- HTML部分 -->
<div class="img-wrapper">
  <img src="./default-img.png" alt="展示图" class="default">
  <img src="./hover-img.png" alt="悬停图" class="hover">
</div>

/* CSS部分 */
.img-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}
.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
/* 默认隐藏悬停图 */
.img-wrapper .hover {
  opacity: 0;
}
/* 悬停时切换显示状态 */
.img-wrapper:hover .default {
  opacity: 0;
}
.img-wrapper:hover .hover {
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者a_random_user