求助：子菜单展开时如何一键模糊整个HTML页面内容

方案1：遮罩层实现（全浏览器兼容） #

不用逐个给子菜单内的元素单独写样式，通过新增一个遮罩层来隔离模糊效果，同时保证子菜单内容清晰：

1. 调整HTML结构：
   给主内容套一个容器，同时在导航同级新增遮罩元素：

   <nav>
     <ul class="nav-list">
       <li>菜单项
         <div class="sub-menu">
           <!-- 子菜单内容：图片、各类元素 -->
         </div>
       </li>
     </ul>
   </nav>
   <div class="content-blur-overlay"></div>
   <main class="main-content">
     <!-- 页面主内容 -->
   </main>
   

2. CSS样式优化：

   /* 默认隐藏遮罩 */
   .content-blur-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(255,255,255,0.2); /* 可选，增强模糊层次感 */
     z-index: 99;
     opacity: 0;
     pointer-events: none; /* 不干扰主内容交互 */
     transition: opacity 0.3s ease;
   }
   
   .main-content {
     transition: filter 0.3s ease;
   }
   
   /* hover时显示遮罩+模糊主内容 */
   .nav-list:hover ~ .content-blur-overlay {
     opacity: 1;
   }
   .nav-list:hover ~ .main-content {
     filter: blur(4px);
   }
   
   /* 子菜单层级高于遮罩，保证清晰 */
   .sub-menu {
     position: relative;
     z-index: 100;
   }
   

方案2：CSS :has()伪类实现（现代浏览器） #

如果不需要兼容老旧浏览器，用:has()可以省去额外的遮罩元素，直接通过父元素状态控制样式：

.main-content {
  transition: filter 0.3s ease;
}

/* 检测nav-list是否hover，统一模糊主内容 */
body:has(.nav-list:hover) .main-content {
  filter: blur(4px);
}

/* 子菜单保持清晰 */
.sub-menu {
  position: relative;
  z-index: 1;
}

关键注意事项 #

• 给nav-list添加position: relative;，确保绝对定位的子菜单不会脱离父级范围。
• 子菜单的z-index必须高于遮罩或模糊的主内容，避免被模糊覆盖。

内容的提问来源于stack exchange，提问作者Thor The dog