按钮悬停切换图片：对齐偏移与层级显示问题求助

一、核心问题拆解 #

1. 图片偏左：按钮内嵌套的<img>受浏览器默认样式或容器布局影响产生偏移，用padding调整背景图的方向逻辑错误，需用背景定位属性精准控制位置。
2. 悬停层级冲突：<img>是按钮的子元素，层级高于按钮的背景图，导致悬停时背景图被默认图片遮挡。

二、极简修改方案（纯CSS+HTML） #

1. 调整HTML（移除按钮内的<img>标签）

将默认按钮图片改为按钮的背景图，让默认图与悬停图共用同一背景层，从根源解决层级问题：

<!-- 修改后的按钮区域代码 -->
<div class="app-form-group buttons">
  <button class="app-form-button"></button>
</div>

2. 重写CSS（控制背景图与对齐）

/* 按钮默认样式：匹配图片尺寸+修正偏移 */
.app-form-button {
  /* 替换为你实际的图片宽高 */
  width: 120px;
  height: 40px;
  border: none; /* 清除默认按钮边框 */
  background: url(images/Submit_Small.png) no-repeat;
  /* 向右偏移3px修正偏左问题，数值可按需微调 */
  background-position: 3px center;
  cursor: pointer; /* 悬停显示手型 */
}

/* 悬停样式：直接替换背景图，保持定位一致 */
.app-form-button:hover {
  background: url(images/Submit_Small_Hover.png) no-repeat;
  background-position: 3px center;
}

三、备选方案（保留<img>标签的简化写法） #

如果不想修改HTML结构，可通过隐藏默认图片+调整偏移的方式解决：

/* 修正图片偏左3像素 */
.app-form-button img {
  margin-left: 3px;
}

/* 悬停时隐藏默认图片，让背景图显示 */
.app-form-group.buttons:hover img {
  opacity: 0;
}

注：此方案需确保按钮尺寸与图片完全匹配，避免背景图错位。

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