仅使用CSS实现鼠标hover时切换卡片图片的解决方案

DevOps 小满

2026-9-2

纯CSS实现卡片悬停切换图片方案

原代码失效原因

<img>是替换元素，src属性加载的前景图层级高于CSS设置的background-image，背景图会被完全遮挡，无法显示
直接在hover状态修改图片宽高会触发页面重排，导致布局抖动

实现方案

方案1：双图叠加切换（推荐，支持平滑过渡）

通过绝对定位将两张图完全重叠，hover时修改透明度实现切换，无布局抖动，支持过渡动画。

HTML代码

<div class="card">
  <img class="img-default" src="images/image-equilibrium.jpg" alt="默认展示图" />
  <img class="img-hover" src="images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg" alt="悬停展示图" />
</div>

CSS代码

.card {
  position: relative;
  min-width: 90%;
  background-color: white;
  margin: 20px auto 0;
  border-radius: 10px;
  overflow: hidden;
}

/* 伪元素撑高卡片，避免图片绝对定位导致容器塌陷，padding-top值按实际图片宽高比调整 */
.card::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}

/* 初始状态隐藏悬停图 */
.img-hover {
  opacity: 0;
}

/* 悬停时切换两张图的透明度 */
.card:hover .img-default {
  opacity: 0;
}
.card:hover .img-hover {
  opacity: 1;
}

方案2：无结构修改方案（复用原有HTML）

不需要调整现有HTML结构，直接通过CSS的content属性替换img加载资源，代码改动最小。

CSS代码（原有HTML无需修改）

.card {
  height: auto;
  min-width: 90%;
  background-color: white;
  margin: 20px auto 0;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.card:hover img {
  content: url("images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg");
}