本文介绍一种无需绝对定位脱离文档流、也不依赖 javascript 的纯 css 解决方案：通过结构重构，将模糊效果施加于独立容器而非父容器本身，从而实现“背景模糊而前景元素锐利”的视觉分离效果。
本文介绍一种无需绝对定位脱离文档流、也不依赖 javascript 的纯 css 解决方案：通过结构重构，将模糊效果施加于独立容器而非父容器本身，从而实现“背景模糊而前景元素锐利”的视觉分离效果。
在 CSS 中，filter: blur() 具有继承性与层叠穿透性——一旦对某个元素应用 filter，其所有后代元素（包括子元素）都会被统一模糊。因此，直接对 .item 设置 hover 下的 filter: blur(3px)，必然导致内部的 .codeCheck 也一同模糊，无法通过 filter: none 在子元素上覆盖消除。
根本解法在于解耦视觉层级：不再让需交互的子元素（如 .codeCheck）成为被模糊容器的后代，而是将其提升至同一 DOM 层级，通过相对定位与 z-index 实现视觉叠加。具体做法如下：
✅ 结构重构：为模糊区域新建一个独立容器（如 .rect），与 .codeCheck 同级置于 .item 内；
✅ 定位协同：.item 设为 position: relative，作为定位上下文；.rect 使用 position: relative 占满空间并承载边框/背景/模糊；.codeCheck 保持 position: absolute，精准悬浮于指定位置；
✅ 样式隔离：仅对 .rect 应用 filter: blur() 和 box-shadow，.codeCheck 完全不受影响，且可通过 z-index 确保始终显示在最上层。
以下是关键代码示例：
.item {
position: relative; /* 建立定位上下文 */
width: 250px;
height: 400px;
}
.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%; /* 可按需调整 */
transform: translateY(-50%);
z-index: 9;
background-color: white;
transition: transform 0.5s ease;
display: none;
}
.item:hover .codeCheck {
display: block;
transform: translateY(-50%) translateY(10%); /* 微调悬停位移 */
}<div class="item"> <div class="rect"></div> <p id="codeCheck3" class="codeCheck"><a href="#">Code</a></p> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免在 .codeCheck 上设置 filter 或任何会触发新层叠上下文（如 opacity < 1）的属性，否则可能意外触发模糊继承；
- 若 .rect 需包含图片或文本内容，请确保这些内容也属于 .rect 内部，而非 .item 直接子元素；
- 所有尺寸（width/height）建议统一使用 100% 配合 .item 的固定尺寸，便于响应式维护。
该方案兼顾语义清晰性与渲染性能，是现代 CSS 中处理“局部模糊+局部清晰”场景的标准实践。
