本文介绍一种简洁高效的方案：通过动态切换容器与目标元素的 CSS 类，结合 :not() 伪类和 filter: blur() 实现“聚焦某元素、虚化其余所有同级元素”的视觉效果，无需遍历 DOM 或硬编码样式。
本文介绍一种简洁高效的方案：通过动态切换容器与目标元素的 css 类，结合 `:not()` 伪类和 `filter: blur()` 实现“聚焦某元素、虚化其余所有同级元素”的视觉效果，无需遍历 dom 或硬编码样式。
在交互式 UI（如信息图谱、SVG 驱动的仪表盘或卡片式布局）中，常需突出当前操作元素——例如点击某个 .box 时，让其保持清晰锐利，而将同级其他盒子及背景区域统一施加模糊效果，形成视觉焦点引导。直接操作每个元素的 style.filter 不仅冗余，还易引发性能问题与状态混乱；更优雅的方式是利用 CSS 层叠机制 + 状态类控制。
✅ 推荐实现方案（类名驱动 + CSS 规则）
首先，在 CSS 中定义两条关键规则：
/* 当容器处于 active 状态时，对所有非 focused 的 .box 应用模糊 */
.container.active .box:not(.focused) {
filter: blur(5px);
transition: filter 0.3s ease;
}
/* 可选：为被聚焦的元素添加轻微提升，强化层次感 */
.container.active .box.focused {
z-index: 10;
transform: scale(1.05); /* 辅助聚焦，非必需 */
}接着，在 JavaScript 的点击事件中，仅管理两个状态类：
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
let currentlyFocusedBox = null;
div.addEventListener('click', function() {
const container = this.closest('.container');
// 1. 清除旧状态：移除所有 .focused，并从容器移除 .active
if (currentlyFocusedBox) {
currentlyFocusedBox.classList.remove('focused');
}
if (container) {
container.classList.remove('active');
}
// 2. 应用新状态：为当前元素添加 .focused，为其容器添加 .active
this.classList.add('focused');
if (container) {
container.classList.add('active');
}
currentlyFocusedBox = this;
});? 为什么优于遍历设置
style.filter？立即学习“Java免费学习笔记（深入）”；
- ✅ 性能友好：CSS 引擎原生优化
filter动画，避免 JS 强制重排；- ✅ 可维护性强：模糊逻辑完全解耦于样式表，修改模糊强度/过渡时间无需触碰 JS；
- ✅ 天然支持嵌套与例外：
.box:not(.focused)精准排除目标，即使新增元素也自动生效；- ✅ 语义清晰：
active/focused类名直观表达 UI 状态，利于团队协作与可访问性（如配合aria-live）。
⚠️ 注意事项
- 确保
.box元素在 DOM 中属于同一父容器（即.container），否则:not(.focused)无法跨容器生效； - 若存在 SVG
<foreignobject></foreignobject>内嵌 HTML，需确认其内部.container能被this.closest('.container')正确捕获（现代浏览器均支持）； - 模糊会略微影响渲染性能，建议
blur()值控制在2px–8px区间，避免过度虚化导致文字不可读； - 如需点击空白处取消聚焦，可在容器上监听
click并判断event.target === container，然后清除状态。
✅ 总结
与其手动遍历并逐个设置 element.style.filter，不如将“聚焦”抽象为容器级状态（.active）与元素级状态（.focused），交由 CSS 的选择器引擎完成批量样式计算。这不仅代码更简练、性能更优，也使设计意图一目了然——真正的「关注点分离」。
