img:hover没反应主因是img为替换元素，iOS Safari等移动端默认不派发:hover事件；未设display:block导致底部留白、悬停区域错位；transition未写在常态规则中；blur值未用px单位或写成none导致动画失效。

img:hover 为什么没反应？先确认是否踩了替换元素陷阱

直接给 <img> 写 :hover 在 iOS Safari 和多数安卓 WebView 上大概率失效——因为 <img> 是替换元素，移动端默认不派发 :hover 事件。更隐蔽的问题是：没设 display: block 会导致图片下方留白，实际悬停区域和视觉位置错位。

正确做法是用容器包裹：

• 把 <img> 套进一个 <div class="img-container">
• :hover 写在容器上，比如 .img-container:hover img
• <img> 必须加 display: block 消除行内空白
• 过渡声明（transition: filter 0.3s ease）必须写在常态规则里，不能只放在 :hover 中

filter: blur() 的值怎么设才不卡、不崩

模糊值不是越大越好看。blur(10px) 在低端机上容易掉帧，blur(none) 看似简洁，但无法参与 CSS 动画——浏览器会把它当作非可插值状态，导致整个 filter 链重置（比如同时用了 grayscale() 也会被清掉）。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 安全范围是 blur(2px) 到 blur(8px)，建议从 blur(4px) 起调
• 单位必须是 px，不能用 rem 或 %
• 想“模糊→清晰”，默认设 filter: blur(6px)，悬停时写 filter: blur(0)，别写 blur(none)
• 如果同时需要灰度或亮度，两边都要写全，比如默认 filter: blur(6px) grayscale(0.8)，悬停 filter: blur(0) grayscale(1)

transition 写在哪？漏掉这句就只有跳变

CSS 动画靠的是两个状态之间的插值计算，而 transition 告诉浏览器“哪些属性要动、怎么动”。它必须出现在基础选择器的常态规则中，而不是只塞进 :hover 里。

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确：.img-container img { filter: blur(4px); transition: filter 0.25s ease; }
• ❌ 错误：.img-container img:hover { filter: blur(0); transition: filter 0.25s ease; }（动画不会触发）
• 现代浏览器支持 filter 过渡，但旧版 Firefox（-webkit-filter 和 -webkit-transition
• 对大图或高分辨率屏，加 will-change: filter 强制走合成层，避免 Retina 屏糊成一片

手机端 hover 失效？用 touchstart + JS fallback 更可靠

纯 CSS :hover 在移动端本质是“伪交互”——首次点击后可能触发，但不可控。真要保证所有设备响应，得用 JS 监听 touchstart 并切换 class。

• 给容器加 class 如 js-hover-ready
• JS 监听 touchstart，给该容器加临时 class is-hovered
• CSS 写两套：.img-container:hover img 和 .img-container.is-hovered img，内容一致
• 注意：iOS Safari 对 touchstart 有 300ms 延迟，可用 { passive: true } 优化，但别影响滚动

真正容易被忽略的是：blur 值的单位、transition 的声明位置、以及移动端根本没 hover 这回事——别指望用户“悬停”一张手机屏幕上的图片。