HTML怎么让图片在悬停时显示另一张图片-html教程-PHP中文网

纯CSS实现悬停换图有三种主流方法：一是单元素背景图切换，适用于图标类小图；二是双图叠加+opacity控制，语义清晰、支持alt属性；三是结合object-fit统一尺寸，避免变形。均无需JavaScript，兼容现代浏览器。

html怎么让图片在悬停时显示另一张图片

用CSS的:hover配合背景图切换或两张图片叠加，就能实现悬停时显示另一张图。关键在于控制显示/隐藏逻辑，而不是JavaScript。

方法一：单个元素切换背景图

适合图标类小图，用同一个

或，通过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');
}</p>方法二：两张图片重叠，悬停时切换透明度
更通用，支持任意格式图片（如），结构清晰，语义正确：
<div class="img-switch">
  @@##@@
  @@##@@
</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;
}</p>
两张图尺寸最好一致，避免跳动

transition让淡入淡出更自然
保留alt属性，兼顾可访问性

方法三：用object-fit保持比例（进阶）
如果原图尺寸不统一，又想严格对齐，可在图片上加：

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										
.img-default, .img-hover {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 或 contain */
  display: block;
}这样即使源图宽高比不同，也能整齐铺满容器，避免拉伸变形。
不需要JS，纯CSS就能稳定运行，兼容所有现代浏览器。选哪种方式取决于你的HTML结构偏好和图片使用场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！