通过将模糊效果施加于独立的遮罩层（而非直接作用于包含子元素的父容器），可精准控制仅背景区域模糊、交互元素（如按钮）始终保持锐利清晰。
通过将模糊效果施加于独立的遮罩层（而非直接作用于包含子元素的父容器），可精准控制仅背景区域模糊、交互元素（如按钮）始终保持锐利清晰。
在 CSS 中，filter: blur() 具有继承性：当对一个父元素应用模糊滤镜时，其所有后代元素（包括文本、图片、子容器等）都会被一同模糊。这导致常见需求——“仅模糊背景，让悬浮按钮/图标保持清晰”——无法通过简单地对 .item:hover 添加 filter: blur() 并尝试反向清除子元素模糊来实现（因为 filter 不支持 filter: none 在子元素上完全抵消父级模糊）。
✅ 正确解法是结构分离：将视觉装饰层（边框、背景、模糊目标）与功能内容层（.codeCheck 等交互元素）在 DOM 结构中解耦，使其处于同一层级的兄弟关系，而非父子嵌套。
✅ 推荐实现步骤：
-
重构 HTML 结构：将原 .item 拆分为外层容器（.item，仅负责定位与布局）和内层模糊层（.rect，承载边框、背景及 filter）：
<div class="item"> <div class="rect"></div> <p id="codeCheck3" class="codeCheck"><a href="#">Code</a></p> </div>
-
CSS 层级与定位设计：
立即学习“前端免费学习笔记（深入）”；
- .item 设为 position: relative，作为绝对定位子元素（.codeCheck）的参考容器；
- .rect 使用 position: relative 占满父容器尺寸，并承担 border、background-color 及 hover 下的 filter: blur(3px)；
- .codeCheck 保持 position: absolute，通过 z-index: 9 确保始终位于 .rect 之上，不受其模糊影响。
-
关键样式片段：
.item { position: relative; width: 250px; height: 400px; margin-top: 30px; }
.rect { position: relative; width: 100%; height: 100%; border: 5px solid blue; background-color: rgba(234, 52, 35, 0); }
.item:hover .rect { filter: blur(3px); box-shadow: 1px 1px 20px 0 blue; }
.codeCheck { position: absolute; left: 170px; top: 50%; / 可按需调整 / z-index: 9; visibility: hidden; display: none; transition: transform 0.5s ease, visibility 0.5s; }
.item:hover .codeCheck { visibility: visible; display: block; transform: translateY(10%); }
⚠️ **注意事项**： - 避免对含子元素的容器直接使用 `filter: blur()` —— 这是根本限制，非 hack 可绕过； - `.rect` 无需 `display: flex` 或内容，纯作视觉层；若需在模糊层中显示图片或文字，请将其作为 `.rect` 的子元素，并接受模糊（此时应另设一层 overlay 容器放置清晰内容）； - `z-index` 必须显式设置且确保 `.codeCheck` 层级高于 `.rect`，否则仍会被视觉遮挡； - 若项目需支持旧版 Safari，注意 `filter` 兼容性（建议加 `-webkit-filter` 前缀）。 该方案兼顾语义清晰、样式可维护与跨浏览器稳定性，是现代 CSS 实现「局部模糊 + 局部清晰」交互效果的标准实践。
