filter: blur(var(--blur))悬停没反应的根本原因是--blur值类型不合法：必须定义为--blur: 4px（带单位），若为--blur: 4或--blur: "4px"，浏览器会静默丢弃整条filter声明。
filter: blur(var(--blur)) 为什么悬停没反应
不是 JS 没触发，也不是 CSS 写错了，而是 --blur 值类型不合法：浏览器看到 blur(var(--blur)) 时，会直接丢弃整条 filter 声明——不报错、不警告、图片也不变。常见失效组合：
-
--blur: 4❌ 无单位数字，blur()拒绝解析 -
--blur: "4px"❌ 字符串，不是可计算长度值 -
--blur: calc(4 * 1px)⚠️ Safari 旧版可能拒绝，且没必要绕弯
正确写法只有一种：--blur: 4px ✅ 变量定义时就带单位，blur(var(--blur)) 才能直通生效。
hover 状态下如何安全切换多个滤镜变量
CSS 变量本身没有“hover 专属作用域”，所以不能靠 :hover 里改 element.style.setProperty() 来局部生效。必须用全局变量 + 条件 CSS 规则：
- 把所有变量挂到
:root上，比如document.documentElement.style.setProperty('--blur', '0px') - 在 CSS 中用媒体查询或 class 控制生效时机：
.img-hover:hover { filter: blur(var(--blur-hover)) brightness(var(--bright-hover)); } - 初始态和悬停态的
filter函数数量、顺序、单位必须完全一致，否则 transition 会跳变 - 别写两套独立声明：
filter: blur(var(--blur));和filter: brightness(var(--bright));—— 后者会覆盖前者
transition 模糊动效卡顿或直接跳变怎么办
Chrome/Edge 支持 filter 过渡较早，但 Safari（含 iOS）直到 v17.6 仍对 blur() 的插值有延迟，关键要满足三要素：
- 必须加
will-change: filter到目标元素上（不是父容器），提前通知渲染线程 - 起始值和结束值都得是完整
filter表达式，且参数结构严格一致：filter: blur(0px) grayscale(0);→filter: blur(6px) grayscale(0); - 所有数值统一用
px（哪怕brightness本可接受小数），避免混用1.2和120%导致插值中断 - 移动端若仍卡顿，降级用
@keyframes：它绕过浏览器对filter过渡的内部判断，强制逐帧计算
JS 更新变量时容易覆盖、丢失值的根源在哪
多个滑块（模糊、亮度、饱和度）同时拖动时，频繁调用 element.style.setProperty() 会导致中间状态被覆盖——浏览器只记住最后一次设置。真正安全的做法是集中更新：
- 所有滑块的
input事件只触发一次requestAnimationFrame(updateVars) -
updateVars函数统一从dataset.value读当前值（如blurSlider.dataset.value），而非实时.value（可能未提交） - 集中调用
document.documentElement.style.setProperty()，按固定顺序批量写入，确保无竞态 - 绝对不要操作
element.style.filter—— 它会覆盖掉你用 CSS 变量写的整条声明
最易被忽略的一点：Safari 15.4 之前压根不支持 filter: blur(var(--blur))，遇到就静默忽略整条规则。检测方式是 getComputedStyle(el).filter 返回空字符串，而不是报错或 fallback。兼容方案只能靠 @supports (filter: blur(0px)) 或 UA 判断后降级为 class 切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
