纯CSS实现hover放大效果需用transition配合transform:scale()和transform-origin居中锚点，IE10/11需用50% 50%及-ms前缀，图片模糊应确保原图分辨率并加image-rendering优化。
直接用 CSS 的 transform: scale() 最简单可靠，不需要 JS，兼容性好到 IE9+ 都能跑。
怎么写 hover 放大效果（纯 CSS）
核心就是给元素加 transition 和 :hover 下的 transform: scale()。注意别只写 scale(1.2) 就完事——默认缩放中心是元素左上角，会“偏移”，得用 transform-origin 锚定中心：
-
transform-origin: center（最常用，居中放大） - 想从顶部居中放大？写
transform-origin: top center - 过渡时间建议控制在
0.2s ~ 0.3s，太快不明显，太慢有延迟感 - 别对
inline元素（如<span></span>）直接用transform，先加display: inline-block或改用block
button {
transition: transform 0.25s ease;
transform-origin: center;
}
button:hover {
transform: scale(1.15);
}
为什么图片放大后模糊或抖动？
常见于 <img alt="HTML怎么做鼠标悬停放大_html鼠标hover元素放大效果【示例】" > 标签：原图分辨率低、浏览器插值算法差、或开启了硬件加速但 GPU 渲染异常。关键对策：
- 确保原图尺寸 ≥ 放大后所需尺寸（比如要放大到 200×200，原图至少 240×240）
- 加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制清晰渲染（对像素图有效） - 避免同时叠加多个
transform（比如又scale又rotate），容易触发次优渲染路径 - 如果用了
will-change: transform，记得 hover 结束后移除，否则长期占 GPU 资源
需要支持 IE10/IE11 怎么办？
IE 对 transform 的支持没问题，但不支持 transform-origin: center 的简写值，必须写全：
立即学习“前端免费学习笔记（深入）”；
- 错的：
transform-origin: center（IE10/11 忽略） - 对的：
transform-origin: 50% 50%或transform-origin: center center - IE10 还要补
-ms-transform前缀（虽然现代项目基本可忽略） - 别用
scaleZ或 3D 变换，IE11 对perspective解析不稳定
a img {
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: -ms-transform 0.25s, transform 0.25s;
}
真正麻烦的不是写法，而是放大后溢出父容器、影响布局流、或者和 z-index 层叠打架——这些得结合具体结构调 overflow、position 和层级，没法一招通吃。
