通过将模糊效果应用到独立的遮罩层而非父容器本身，可精准控制 blur 作用范围，使悬浮显示的子元素（如“code”按钮）完全不受模糊影响，兼顾视觉层次与交互清晰度。
通过将模糊效果应用到独立的遮罩层而非父容器本身，可精准控制 blur 作用范围，使悬浮显示的子元素（如“code”按钮）完全不受模糊影响，兼顾视觉层次与交互清晰度。
在 CSS 中，filter: blur() 具有继承性：当它被应用到父元素时，其所有后代元素（包括子元素）都会被统一模糊——这是浏览器渲染机制决定的，无法通过简单地对子元素设置 filter: none 来取消（因为 filter 不支持局部重置，且 none 在继承链中不具有“覆盖”能力）。
因此，真正有效的解决方案是结构分离：将需要模糊的视觉层（如边框、背景）与需保持清晰的交互内容（如 .codeCheck 按钮）拆分为同级兄弟元素，再通过定位与层级（z-index）精确叠加。
✅ 正确实现步骤
- 重构 HTML 结构：将原 .item 的装饰性样式（边框、背景）剥离至一个独立的 .rect 元素，与 .codeCheck 并列置于 .item 内部；
- 启用相对定位上下文：为 .item 添加 position: relative，确保其内部绝对定位的 .codeCheck 能以它为参考系；
- 仅对 .rect 应用模糊：悬停时只对 .rect 设置 filter: blur(3px) 和 box-shadow，.codeCheck 完全不受影响；
- 合理控制层叠顺序：.codeCheck 设置 z-index: 9，确保其始终显示在模糊层之上。
? 示例代码（精简关键部分）
<div class="item">
<div class="rect"></div>
<p id="codeCheck3" class="codeCheck">
<a href="#">Code</a>
</p>
</div>.item {
position: relative; /* 建立定位上下文 */
width: 250px;
height: 400px;
margin-top: 30px;
}
.rect {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 5px solid blue;
background-color: rgba(234, 52, 35, 0);
z-index: 0;
}
.codeCheck {
position: absolute;
left: 170px;
top: 50%;
transform: translateY(-50%);
background-color: white;
padding: 5px 8px;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
z-index: 9;
}
.item:hover .rect {
filter: blur(3px);
box-shadow: 1px 1px 20px 0px blue;
}
.item:hover .codeCheck {
visibility: visible;
opacity: 1;
transform: translateY(-50%) translateX(0);
}⚠️ 注意事项：
- 避免使用 display: none 控制 .codeCheck 显隐——它会破坏 transition 动画；推荐改用 visibility + opacity 组合；
- .rect 使用 position: absolute 可避免干扰内部流式布局，同时保证尺寸与 .item 完全一致；
- 若需兼容旧版 Safari，注意 filter 属性需添加 -webkit-filter 前缀；
- 所有模糊元素会触发 GPU 加速，大量使用时建议配合 will-change: filter（谨慎使用，避免过度渲染）。
这种“分层模糊”策略不仅解决了子元素去模糊问题，还提升了结构语义性与后期维护性——装饰层与功能层职责分离，逻辑更清晰，扩展性更强。
立即学习“前端免费学习笔记（深入）”；
