css hover状态图片卡闪
思否 问答 👍 2 含 AI 优化版
问题
css hover状态图片卡闪
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
使用 CSS :hover 切换图片时，第二张图片在鼠标悬停的瞬间会有明显的闪烁/卡顿。
涉及技术
CSS :hover、图片预加载、CSS Sprite（雪碧图）
期望结果
消除 hover 切换图片时的闪烁问题。
回答
原始回答
为什么会闪？因为第二张图片加载需要时间，所以会闪。那么解决的方向就是让第二张图片不需要加载、提前加载第二张图片雪碧图，把两张图放在同一个url上面，通过坐标控制显示。图片预加载，可以使用js。也可以给他在css上加载出来，background支持多张图片哟。已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。
AI 优化 · 回答整理
解答思路
闪烁的根本原因是第二张图片在 hover 触发时才开始加载，加载耗时导致画面出现空白/延迟。解决方向就是让第二张图片提前加载好，而不是等到 hover 时才加载。
详细说明
常见的三种解决方式：
- CSS Sprite（雪碧图）：把两张图拼接成一张图，通过
background-position控制显示哪部分，避免加载第二张单独的图片。 - 多背景图 + 提前设置：
background支持同时设置多张图片，可以让两张图在页面加载时就一起请求，hover 时只是切换显示层级/坐标，不产生额外的网络请求。 - JS 预加载：用
Image对象提前把第二张图加载到浏览器缓存里，hover 时直接从缓存读取，不再有加载延迟。
示例代码
.icon {
width: 32px;
height: 32px;
background-image: url('sprite.png');
background-position: 0 0;
}
.icon:hover {
background-position: 0 -32px;
}
const preload = new Image();
preload.src = 'hover.png';
小结
Hover 闪烁本质是“图片没提前加载好”，解决思路都是围绕「提前加载」展开：雪碧图、多背景图或 JS 预加载三选一即可。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault