汉堡菜单选中时如何为外部Overlay元素添加全屏遮罩样式

你遇到的核心问题是CSS兄弟选择器的局限性：~选择器只能选中与目标元素同级且位置在它之后的元素，而你的.overlay在.navbar外部且位于其前方，和复选框既不同级也不在后面，所以CSS无法直接选中。

下面是三种可行的解决思路：

方案1：调整HTML结构（最简单） #

把.overlay移动到.navbar内部，作为复选框的同级兄弟，放在复选框之后。这样原有的CSS逻辑就能直接生效：

修改后的HTML：

<div class="navbar">
  <!--toggle-->
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle"  >
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>

  <!-- 将overlay移到这里 -->
  <div class="overlay"></div>

  <div id="sidebarMenu" class="sidebar">
    <ul class="sidebarMenuInner">
      <li><a href="#">Company</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">YouTube</a></li>
      <li><a href="#">Linkedin</a></li>
    </ul>
  </div>
</div>

原CSS无需修改，就能在复选框选中时触发遮罩样式。

方案2：用JavaScript控制（无需改HTML结构） #

监听复选框的change事件，根据选中状态给.overlay添加/移除激活类：

首先修改CSS，把遮罩样式写成一个独立类：

.overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  z-index: 10000;
}

然后添加JS代码：

const checkbox = document.getElementById('openSidebarMenu');
const overlay = document.querySelector('.overlay');

checkbox.addEventListener('change', function() {
  overlay.classList.toggle('active', this.checked);
});

这个方案兼容性最好，适合所有浏览器。

方案3：用CSS :has()选择器（现代浏览器支持） #

如果你的项目不需要兼容旧版浏览器（比如IE），可以用:has()选择器直接选中包含选中复选框的.navbar前面的.overlay：

修改后的CSS：

.navbar:has(input[type=checkbox]:checked) + .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  z-index: 10000;
}

注意：需要把.overlay放在.navbar的后面（调整HTML顺序），因为+是相邻兄弟选择器，只能选后面的同级元素。修改后的HTML顺序：

<div class="navbar">
  <!--toggle-->
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle"  >
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>

  <div id="sidebarMenu" class="sidebar">
    <ul class="sidebarMenuInner">
      <li><a href="#">Company</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">YouTube</a></li>
      <li><a href="#">Linkedin</a></li>
    </ul>
  </div>
</div>

<div class="overlay"></div>

这个方案纯CSS实现，无需JS，但要注意浏览器兼容性（Chrome 101+、Firefox 121+支持）。

内容的提问来源于stack exchange，提问作者Fangles