纯CSS实现悬停换图有三种主流方法：一是单元素背景图切换，适用于图标类小图；二是双图叠加+opacity控制，语义清晰、支持alt属性；三是结合object-fit统一尺寸，避免变形。均无需JavaScript，兼容现代浏览器。
用CSS的:hover配合背景图切换或两张图片叠加，就能实现悬停时显示另一张图。关键在于控制显示/隐藏逻辑，而不是JavaScript。
方法一：单个元素切换背景图
适合图标类小图，用同一个<div>或<code><span></span>，通过CSS设置默认和悬停时的背景图：<div class="icon-hover"></div>
<p>.icon-hover {
width: 64px;
height: 64px;
background-image: url('icon-normal.png');
background-size: contain;
background-repeat: no-repeat;
}
.icon-hover:hover {
background-image: url('icon-hover.png');
}
方法二：两张图片重叠，悬停时切换透明度
更通用，支持任意格式图片（如<img alt="HTML怎么让图片在悬停时显示另一张图片" >），结构清晰，语义正确：
<div class="img-switch">
<img src="pic1.jpg" alt="默认图" class="img-default">
<img src="pic2.jpg" alt="悬停图" class="img-hover">
</div>
<p>.img-switch {
position: relative;
display: inline-block;
}
.img-hover {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.img-switch:hover .img-hover {
opacity: 1;
}
.img-switch:hover .img-default {
opacity: 0;
}- 两张图尺寸最好一致，避免跳动
-
transition让淡入淡出更自然 - 保留
alt属性，兼顾可访问性
方法三：用object-fit保持比例（进阶）
如果原图尺寸不统一，又想严格对齐，可在图片上加：
立即学习“前端免费学习笔记（深入）”；
.img-default, .img-hover {
width: 100%;
height: 200px;
object-fit: cover; /* 或 contain */
display: block;
}这样即使源图宽高比不同，也能整齐铺满容器，避免拉伸变形。
不需要JS，纯CSS就能稳定运行，兼容所有现代浏览器。选哪种方式取决于你的HTML结构偏好和图片使用场景。
