必须用容器包裹 img 并设 display: inline-block/block、img 自身设 display: block 消除空白、移动端需用 :active 或 JS 替代 hover，否则 Safari iOS 和 Chrome Android 上 hover 失效或卡顿。
:hover 就能实现，但必须套容器、禁用默认行内行为、避免重排——否则在 Safari iOS、Chrome Android 上大概率不触发，或高 DPI 屏幕下模糊卡顿。
为什么不能直接写 img:hover
<img> 是替换元素，部分浏览器（尤其是 Safari iOS 和旧版 Chrome Android）对它的 :hover 支持极弱；鼠标移入可能完全无响应，或只在首次生效。更隐蔽的问题是：直接在 img 上加 transform 或 filter 动画，容易因未启用合成层导致 Retina 屏边缘糊、动画掉帧。
- 必须用
<div class="img-hover">或<figure>包裹img - 容器需设
display: inline-block或block，否则无法稳定触发:hover -
img自身要加display: block，消除底部默认空白（行内基线对齐导致）
缩放 + 上移效果怎么写才自然
纯 transform: scale(1.05) 会显得“浮”；加轻微 translateY(-2px) 更符合视觉重力感，且不触发重排。
- 容器加
overflow: hidden，防止缩放后边缘溢出 -
img的过渡只写transform，别混width/height——后者强制重排，卡顿明显 - 示例关键代码：
.img-hover { display: inline-block; overflow: hidden; }<br>.img-hover img { display: block; transition: transform 0.3s ease; }<br>.img-hover:hover img { transform: scale(1.05) translateY(-2px); }
hover 时加遮罩和文字该怎么做
别给 img 设 opacity，否则文字也变透明；也别用两个 img 叠加再显隐——破坏懒加载、SEO，还可能闪屏。
- 结构必须是同级：
<div class="img-container"><img><div class="overlay">文字</div></div> -
.img-container要设position: relative -
.overlay用position: absolute; top: 0; left: 0; width: 100%; height: 100%，背景用rgba(0,0,0,0.6)而非opacity: 0.6 - 过渡只写
opacity或background-color，别动display
移动端 hover 失效怎么办
触摸设备（iOS Safari、Android Chrome）没有真实 hover 状态，开发者工具模拟的「Toggle device toolbar」不可信——真机长按才可能触发一次，且不持续。
立即学习“前端免费学习笔记（深入）”；
- 别把 hover 当作核心交互逻辑（比如“悬停显示操作按钮”）
- 如需反馈，改用
:active做按下态，或用 JS 监听touchstart/touchend切换 class - 如果只是视觉增强（如相册预览），可保留 hover，但务必在真机上点一下验证
- 深色模式适配不能靠 hover 切图，要用
@media (prefers-color-scheme: dark)
img、img 是否设了 display: block、以及移动端 fallback 是否存在。漏掉任一个，上线后 QA 都会打回来。 
