我可以用同一个复选框hack触发2个动作吗？ CSS的使用

Question

在本例中，我有一个侧边菜单，在选中“复选框Hack”后从左边滑动。 当菜单出现时，我如何在整个页面中放置阴影覆盖（将焦点放在侧边菜单上）？ 我尝试用复选框应用相同的方法，但似乎不起作用。 有人帮忙吗？

null

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}

.color-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  opacity: .58;
  background: #787777;
  transition: 0.1s ease;
}

#hamburger-checkbox:checked ~ .color-overlay{
  width: 100%;
  transition: 0.1s ease;
}

<div class="color-overlay"></div>
<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>

  <nav class="nav">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">Projects</a>
  </nav>
</header>

null

Answer 1

作为一个变体，您可以添加伪元素（更新）:

null

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* You can't modify checkbox so hide it */

#hamburger-checkbox {
  display: none;
}


/* Use label instead */

.hamburger {
  font-size: 30px;
  position: absolute;
  z-index: 99;
}


/* Use :checked to indicate when it's checked */

#hamburger-checkbox:checked~.nav {
  transition: 2s ease;
  transform: translateX(0px);
}

#hamburger-checkbox:checked~.color-overlay {
 opacity: .58;
}

.nav {
  width: 200px;
  height: 100vh;
  background: orange;
  transform: translateX(-200px);
  transition: 2s ease;
  padding: 40px 10px;
  position: relative;
}

.color-overlay {
  width: 100vw;
  position: fixed;
  height: 100vh;
  background: #787777;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 2s ease;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
  z-index: 2;
  position: relative;
}

<header>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="hamburger" for="hamburger-checkbox">☰</label>
  <div class="color-overlay"></div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Projects</a>
  </nav>
</header>