如何用CSS实现两张图片同位置放置、hover时切换显示的效果

你之前设置position: absolute未生效的核心原因是没有给父容器添加相对定位作为定位上下文，绝对定位元素会默认相对于整个页面定位，自然无法实现两张图片在按钮内部重叠的效果，按以下调整即可实现需求：

核心修改点 #

• 给.shop-button添加position: relative，作为两张箭头图片的定位参照
• 给箭头图片添加统一的绝对定位、垂直居中规则，保证两张图完全重叠在同一位置
• 适当调大按钮右侧内边距，避免按钮文字和箭头重叠

修改后完整代码 #

CSS代码 #

.shop-button {
      cursor: pointer;
      padding: 20px 45px 21px 25px; /* 右侧padding加大，预留箭头位置 */
      border: 1px solid black;
      background-color: white;
      color: black;
      position: relative; /* 新增：作为绝对定位的父容器 */
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;

      .arrow-image {
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }
      /* 新增：明确默认状态下箭头的显示规则 */
      .arrow-image-hover {
          opacity: 1;
          transition: opacity 0.3s ease-in-out;
      }

      &:hover {
        background-color: black;
        border-color: black;
        color: white;
        .arrow-image-hover {
          opacity: 0;
        }
        .arrow-image {
          opacity: 1;
        }
      }
    }

    a {
      text-decoration: none;
      img {
        position: absolute; /* 新增：绝对定位实现重叠 */
        top: 50%; /* 新增：垂直居中对齐 */
        transform: translateY(-50%); /* 新增：修正垂直居中偏移 */
        right: 25px; /* 新增：固定在按钮右侧25px位置 */
      }
    }

HTML代码无需修改，保持原有结构即可 #

<div class="button-wrapper">
    <a class="shop-button" [routerLink]="'/shop'">GO TO SHOPPING
        <img src="/assets/arrow_1.svg" class="arrow-image"  alt="arrow" />
        <img src="/assets/arrow_2.svg" class="arrow-image-hover"  alt="arrow" />
    </a>
</div>

如果箭头和文字的间距不符合预期，调整right属性或者按钮的padding-right数值即可。

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