通過選中復選框顯示疊加選單

我想通過選中復選框（類“漢堡復選框”）來顯示覆寫選單。問題是，選中復選框后，覆寫選單不會消失（檢查 CSS 中的第 154 行），即使代碼與漢堡選單影片（例如 CSS 中的第 149 行）相同：

CodePen 鏈接： https ://codepen.io/matu-sk/pen/ZEJrypw

代碼：

HTML

<nav>
  <div class="hamburger-menu">
    <div class="hamburger-wrapper">
      <input class="hamburger-checkbox" type="checkbox">
      <div class="hamburger-bun">
        <div class="hamburger-burger">
        </div>
      </div>
    </div>
  </div>
  <div class="overlay-menu">
    <div class="overlay-nav-wrapper">
      <ul class="nav overlay-nav">
        <li><a class="nav-link-hidden" href="">a</a></li>
        <li><a class="nav-link-hidden" href="">b</a></li>
        <li><a class="nav-link-hidden" href="">c</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

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

body {
  min-height: 100vh;
  color: #04080f;
  background: #ffffff;
  font-family: "Nunito", sans-serif;
}

/** NAVIGATION **/

nav {
  margin: auto;
  min-width: 502px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  list-style: none;
}

.nav a {
  padding: 20px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  color: #04080f;
}

.overlay-menu {
  margin: auto;
  z-index: 1;
  width: 200px;
  height: 155px;
  background-color: yellow;
  text-align: center; 
  line-height: 3em;
}

.overlay-nav-wrapper {
  margin: auto;
  width: 200px;
  height: 200px;
}

.overlay-nav a:hover {
  color: #424CF9;
}

@media screen and (max-width: 800px) {
  nav {
    margin: auto;
  }
}

/** HAMBURGER MENU **/

.hamburger-menu {
  display: inline-block;
  vertical-align: middle;
  padding: 10px 25px 10px 15px;
  z-index: 2;
}

.hamburger-wrapper {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
}

.hamburger-wrapper .hamburger-bun:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
  top: 10%;
  right: 0;
}

.hamburger-wrapper .hamburger-bun:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
  bottom: 10%;
  left: 0;
}

.hamburger-wrapper .hamburger-bun .hamburger-burger {
  position: absolute;
  display: flex;
  align-items: center;
  height: 30px;
  width: 30px;
}

.hamburger-wrapper .hamburger-bun .hamburger-burger:before, .hamburger-wrapper .hamburger-bun .hamburger-burger:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  background: #04080f;
  box-shadow: 0 0 0 5px #ffffff;
  border-radius: 30px;
  transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
}

.hamburger-wrapper .hamburger-checkbox {
  display: block;
  position: absolute;
  opacity: 0;
  z-index: 1;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun:before, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun:after, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun :before, .hamburger-wrapper .hamburger-checkbox:hover ~ .hamburger-bun :after {
  background: #424CF9;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun:before, .hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun:after {
  width: 0;
  display: none;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun .hamburger-burger:before {
  transform: rotate(135deg);
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .hamburger-bun .hamburger-burger:after {
  transform: rotate(45deg);
  box-shadow: 0 0 0 0 #ffffff;
}

.hamburger-wrapper .hamburger-checkbox:checked ~ .overlay-menu {
  display: none;
}

uj5u.com熱心網友回復：

輸入沒有結束標記。如果您希望漢堡包切換復選框，請使用<label>：

<div class="hamburger-menu">
  <div class="hamburger-wrapper">
    <input type="checkbox" class="hamburger-checkbox" id="hamburger-checkbox">
    <label for="hamburger-checkbox">
      <div class="hamburger-bun">
        <div class="hamburger-burger">
        </div>
      </div>
    </label>
  </div>
</div>

您可以隱藏復選框，因此只會<label>看到。

uj5u.com熱心網友回復：

請嘗試這種方式

<nav>
   <div class="hamburger-menu">
      <div class="hamburger-wrapper">
         <input type="checkbox" class="hamburger-checkbox"></input>
         <div class="hamburger-bun">
            <div class="hamburger-burger">
            </div>
         </div>
         <div class="overlay-menu">
            <div class="overlay-nav-wrapper">
               <ul class="nav overlay-nav">
                  <li><a class="nav-link-hidden" href="">a</a></li>
                  <li><a class="nav-link-hidden" href="">b</a></li>
                  <li><a class="nav-link-hidden" href="">c</a></li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</nav>

標籤：html css

上一篇：如何更改產品頁面上的訂單（描述-推薦產品）

下一篇：css網格網頁-顯示平面網格而不是預期的正方形