如何实现按钮悬停时切换内部嵌入的图片（不使用CSS背景图）

全程无需使用按钮的background-image属性，所有实现均围绕按钮内嵌的<img>元素完成，完全匹配“图片不撑满按钮、移动端同步切换按钮底色与异色图片”的需求。

可直接落地的实现方案 #

方案1：双图叠放定位法（纯CSS无额外JS，兼容性最佳） #

原理为提前将两张待切换的图片放入按钮内部，通过透明度控制默认显示原图、悬停时显示目标图，全程图片尺寸完全可控。

1. 配套调整CSS代码（原有按钮样式保持不变，仅新增定位与图片控制规则，同时修正原有写法不规范的边框属性）：

.btnExample {
  /* 原有样式保留，新增相对定位作为内部图片的定位基准 */
  position: relative;
  width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border: 3px solid #01509f;
  color: black;
  background-color: #fff;
  border-radius: 100%;
  margin-left: 20px;
  text-align: center;
}

/* 统一控制按钮内所有图片的样式，保证自动居中 */
.btnExample img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  /* 可选：添加透明度过渡，让切换更顺滑 */
  transition: opacity 0.2s ease;
}

/* 默认状态下，待切换的悬停图片完全隐藏 */
.btnExample .img-hover {
  opacity: 0;
}

/* 悬停状态下，原图隐藏、目标图显示，与按钮背景色切换同步触发 */
.btnExample:hover {
  background-color: #000;
}
.btnExample:hover .img-default {
  opacity: 0;
}
.btnExample:hover .img-hover {
  opacity: 1;
}

2. 调整HTML结构，将两张图片放入按钮内：

<button class="btnExample">
  <img class="img-default" src="初始图片路径" alt="">
  <img class="img-hover" src="同图案异色的目标图片路径" alt="">
</button>

该方案优势：所有图片均为常规内嵌<img>元素，不会被按钮样式撑满，切换逻辑兼容移动端触摸触发的悬停状态。

方案2：单图动态切换法（零冗余DOM节点） #

如果不想在页面中放置两个图片节点，可利用替换元素的content属性配合CSS自定义属性实现单图切换，不需要额外增加DOM节点。

1. 配套CSS代码（原有按钮样式保持不变，仅新增图片切换规则）：

.btnExample {
  /* 原有按钮样式全部保留，包括:hover的背景色切换规则 */
  width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border: 3px solid #01509f;
  color: black;
  background-color: #fff;
  border-radius: 100%;
  margin-left: 20px;
  text-align: center;
}

.btnExample img {
  /* 图片保持原有的18*18尺寸，居中显示 */
  width: 18px;
  height: 18px;
}

/* 悬停时直接覆盖img的渲染内容，切换为目标图 */
.btnExample:hover {
  background-color: #000;
}
.btnExample:hover img {
  content: var(--hover-img-url);
}

2. 调整HTML结构，给img添加自定义属性存储目标图路径：

<button class="btnExample">
  <img 
    src="初始图片路径" 
    style="--hover-img-url: url('同图案异色的目标图片路径')"
    alt=""
  >
</button>

该方案优势：DOM结构更简洁，图片不会撑满按钮空间，切换逻辑与按钮背景色完全同步。

注意：两种方案均不需要使用任何background-image属性，可直接在原有代码基础上修改，适配移动端的按钮交互逻辑。

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