transition 必须写在常态样式中，否则首次悬停无动画；局部放大需容器+overflow+transform-origin配合；移动端:hover基本失效，应降级为点击或touch事件；background-position放大镜易偏移，需精确计算坐标系与原图分辨率。
transition 必须写在常态样式里，否则首次悬停没动画
浏览器无法对“从无 transition 到有 transition”做插值，所以把 transition: transform 0.3s ease 放在 :hover 规则里，第一次悬停只会突变，没有过渡效果。
正确做法是直接写在图片常态规则中：
img {
transition: transform 0.3s ease;
}
.img-container:hover img {
transform: scale(1.8);
}
别用 transition: all 0.3s——它会监听所有可动画属性，可能意外触发重排或模糊动画。
局部放大 ≠ 全图 scale，必须靠容器 + overflow + transform-origin 配合
纯 scale(1.8) 是整张图等比拉伸，不是“镜片式局部放大”。要只显示原图某一块区域，得三层结构：
- 外层容器设固定宽高 +
overflow: hidden（如width: 300px; height: 200px;） - 内部
img设display: block（避免 inline 默认的底部空白） -
transform-origin控制缩放中心点——但注意：它不接受 CSS 变量计算，JS 动态更新得用style.transformOrigin = x + 'px ' + y + 'px'
移动端 :hover 基本失效，不能硬扛
iOS Safari 和多数安卓浏览器对 :hover 支持极弱，这不是 bug，是规范行为。用 @media (hover: hover) 判断不可靠——安卓 Chrome 常报 hover: none 却仍响应 hover。
务实方案只有两个：
- 接受“移动端无悬停”，改用点击展开大图
- 放弃纯 CSS，用
touchstart/touchmove切换.is-magnified类，并配 JS 更新transform-origin
如果必须保留视觉反馈，可在移动端 fallback 为 scale(1.05) + box-shadow，至少让用户感知交互发生了。
background-position 实现的放大镜，坐标计算极易偏移
用遮罩层 + background-image 模拟放大镜时，background-position 算不准是高频问题。常见原因包括：
- 容器带
border或padding，但 JS 计算时没减去getComputedStyle(el).borderLeftWidth - 用了
getBoundingClientRect()却没减去父容器的 offset，导致坐标系错乱 - 图片本身加了
transform: scale()，干扰background-size和background-position的单位逻辑
实操建议：用 getBoundingClientRect() 获取遮罩层相对视口位置，再减去父容器的 getBoundingClientRect()，得到真正相对于父容器的坐标；原图分辨率至少要是显示区的 2 倍，禁用 background-size: 100% 100%。
真正难的不是写几行 :hover，而是搞清「缩放中心在哪」「坐标系是否对齐」「移动端要不要降级」「原图够不够清晰」——这些细节一错，效果就卡顿、偏移、糊成一片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
