纯 CSS 实现「悬停 grid-area 时其余区域变暗」的可行方案是：将暗淡效果设在父容器上，配合 pointer-events: none 和 z-index 控制穿透与层级；现代浏览器可用 :has() 精准控制（如 .grid:has(.main:hover) .header { opacity: 0.25; }），旧版需 JS 补位添加 data-hovered 属性以维持样式分离。
grid-area 悬停时如何用 CSS 选择兄弟区域
纯 CSS 实现「悬停某个 grid-area，其余区域变暗」的关键，在于能否选中「当前悬停项之外的所有同级网格子项」。但 CSS 没有 :not(:hover) 的兄弟选择器（:has() 虽支持，但无法反向匹配「被 hover 元素的兄弟」）。所以不能靠「给 .item:hover 写样式，再用选择器批量改其他兄弟」——这条路走不通。
真正可行的路径是：把暗淡效果做在容器上，再用 pointer-events: none 配合 z-index 层级控制，让悬停状态可穿透、可隔离。
常见错误现象：
– 直接写 .grid > *:not(:hover) { opacity: 0.3; } —— 完全无效，因为 :not(:hover) 不会因另一个元素 hover 而触发；
– 给每个子项加 transition 但没统一控制时序，导致闪烁或延迟不一致。
- 必须把暗淡态设在父容器
.grid上，初始为全暗，再用.grid:hover > *恢复全部；再单独给.grid > *:hover设高亮 - 所有子项需设
pointer-events: none，只有被 hover 的那个显式设回pointer-events: auto，否则悬停移开瞬间会闪动 - 过渡动画要统一加在
opacity和filter: blur()等可继承/层叠的属性上，避免重排
用 grid-area 名称 + :has() 控制局部高亮（现代方案）
:has() 是目前唯一能「根据某个区域是否 hover，影响其容器和其他兄弟」的原生 CSS 方式，但它要求浏览器支持（Chrome 105+、Safari 15.4+、Firefox 121+）。不支持时整个效果退化为无变化，需留意兼容性底线。
立即学习“前端免费学习笔记（深入）”；
使用场景：你已用 grid-template-areas 定义了区域名，比如 "header main sidebar"，想悬停 main 时只高亮它、暗淡 header 和 sidebar。
参数差异：
– .grid:has(.main:hover) 可以命中容器，但无法区分「哪个 area 被 hover」；
– 必须为每个区域写独立规则，例如：.grid:has(.main:hover) .header, .grid:has(.main:hover) .sidebar { opacity: 0.25; }
性能影响：每多一个 :has() 规则，浏览器都要做一次子树检查，区域多于 5 个时建议合并逻辑或降级处理。
/* 示例：悬停 main 区域时，header 和 sidebar 暗淡 */
.grid:has(.main:hover) .header,
.grid:has(.main:hover) .sidebar {
opacity: 0.25;
transition: opacity 0.25s ease;
}
.main:hover {
z-index: 2;
pointer-events: auto;
}fallback 方案：用 JS 补齐 :has() 缺失的浏览器
不是所有项目都能放弃旧版 Chrome 或 Firefox。当 :has() 不可用时，纯 CSS 无法可靠实现该交互，必须引入极简 JS 来补位——不是为了接管全部逻辑，而是仅用于添加/移除一个 class。
容易踩的坑：
– 监听 mouseenter 却忽略 mouseleave，导致 class 残留；
– 给每个子项都绑事件，没做事件委托，DOM 多时性能明显下降；
– 没判断 grid-template-areas 是否生效，直接按 class 名操作，和实际区域名脱节。
- 只需监听父容器
.grid的事件委托，用e.target判断是否为区域子项 - 用
getComputedStyle(grid).gridTemplateAreas解析出真实区域名，再比对target的class或data-area - JS 只负责加
data-hovered="main"这类属性，所有样式仍由 CSS 控制，保持关注点分离
transition 动画卡顿或不同步的原因
网格项暗淡时动画不流畅，90% 是因为同时触发了重排（layout）而非纯重绘（paint）。比如给 opacity 加 transition 却同时改了 transform 或 width，或者用了 filter: blur() 但没开启硬件加速。
性能影响明显的表现：
– 悬停后动画延迟 100ms 才开始；
– 在低端 Android 或 Safari iOS 上掉帧严重；
– 多个区域连续 hover 时出现残影。
- 确保只对
opacity、transform、filter做 transition，这三者可进合成层 - 给所有网格子项加
will-change: opacity（仅在 hover 触发前一刻加，hover 结束后移除，避免常驻开销） - 避免在
@media (prefers-reduced-motion: reduce)下仍强制播放，应检测并禁用
复杂点在于：暗淡不是独立动作，它依赖 hover 状态的传播方向和粒度。有人想要「悬停即刻响应」，有人需要「悬停 200ms 后才生效」防误触——这些必须由 JS 控制延时，CSS 本身不提供 hover 延迟能力。别试图用 transition-delay 混淆目标。事情说清了就结束
