單擊時漢堡菜單覆蓋不會顯示 X

Question

單擊時漢堡菜單覆蓋不會顯示 X。 我在 menuToggle 處於活動狀態時顯示 X 時出現問題。 當 background-color 設置為任何顏色時，並選中切換，然后 X 消失。 是什么影響了它？ 我需要 X 以任何顏色顯示。 它顯示在代碼筆中。 謝謝！

/* Hamburger */
/* The hidden checkbox */
.menuToggle input {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 60px;
    opacity: 0;
    z-index: 1;
    margin: 1rem;
    cursor: pointer;
}

/* The container of the hamburger lines */
.menuToggle .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 50px;
  margin: 1.5rem;
}

/* All three lines of the hamburger */
.menuToggle .hamburger span {
  display: flex;
  background: black;
  width: 60px;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 10px;
  transition: 0.2s ease-in;
}

/* Pushing the middle line of the hamburger to the left when not hovered*/
.menuToggle .hamburger .middle {
  position: relative;
  right: 10px;
  
}

/* Pushing the middle line of the hamburger to the right when hovered*/
.menuToggle input:hover + .hamburger > .middle {
  transform: translateX(15%);
}

/* Pushing the middle line of the hamburger to the right when checked*/
.menuToggle input:checked + .hamburger > .middle {
 transform: translateX(15%);
}

/* Making an X while menu is open */

.x-line {
  opacity: 0;
  position: relative;
  bottom: 32px;
  right: 9px;
}

.menuToggle input:checked + .hamburger > span {
  opacity: 0;
}

.menuToggle input:checked + .hamburger > .middle {
  opacity: 1;
  transform: rotate(135deg);
}

.menuToggle input:checked + .hamburger > .x-line {
  opacity: 1;
  transform: rotate(45deg);
}

/* Hides the menu when input not checked*/
.menuToggle .menu {
  opacity: 0;
  transform: scale(0.0);
  transition: 0.2s ease-in;
/* Menu styling*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: purple;
}

/* Styling the links in the menu*/
.menu li {
  list-style: none;
  font-size: 3rem;
  padding: 1rem;
  text-align: center;
}

.menu li a {
  color: black;
  text-decoration: none;
}

/* Shows the menu when input is checked*/
.menuToggle input:checked ~ .menu {
    transform: scale(1.0);
    opacity: 1;
}

/* Underlining menu links when hovered*/
.menuToggle .menu a:hover {
    background-image: linear-gradient(to bottom, #63646b 33%, transparent 100%);
    background-position: 0 1em;
    background-repeat: repeat-x;
    background-size: 2px 60px; 
}
/* End Hamburger */

https://codepen.io/asmsngusr/pen/BadvdJB

Answer 1

您需要在.menuToggle input和.menuToggle .hamburger上添加z-index請檢查下面的答案希望它有效。

 /* Hamburger */ /* The hidden checkbox */ .menuToggle input { position: absolute; top: 0; right: 0; width: 90px; height: 60px; opacity: 0; z-index: 2; margin: 1rem; cursor: pointer; } /* The container of the hamburger lines */ .menuToggle .hamburger { position: absolute; top: 0; right: 0; width: 60px; height: 50px; margin: 1.5rem; z-index: 1; } /* All three lines of the hamburger */ .menuToggle .hamburger span { display: flex; background: black; width: 60px; height: 8px; margin-bottom: 8px; border-radius: 10px; transition: 0.2s ease-in; } /* Pushing the middle line of the hamburger to the left when not hovered*/ .menuToggle .hamburger .middle { position: relative; right: 10px; } /* Pushing the middle line of the hamburger to the right when hovered*/ .menuToggle input:hover + .hamburger > .middle { transform: translateX(15%); } /* Pushing the middle line of the hamburger to the right when checked*/ .menuToggle input:checked + .hamburger > .middle { transform: translateX(15%); } /* Making an X while menu is open */ .x-line { opacity: 0; position: relative; bottom: 32px; right: 9px; } .menuToggle input:checked + .hamburger > span { opacity: 0; } .menuToggle input:checked + .hamburger > .middle { opacity: 1; transform: rotate(135deg); } .menuToggle input:checked + .hamburger > .x-line { opacity: 1; transform: rotate(45deg); } /* Hides the menu when input not checked*/ .menuToggle .menu { opacity: 0; transform: scale(0.0); transition: 0.2s ease-in; /* Menu styling*/ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: purple; } /* Styling the links in the menu*/ .menu li { list-style: none; font-size: 3rem; padding: 1rem; text-align: center; } .menu li a { color: black; text-decoration: none; } /* Shows the menu when input is checked*/ .menuToggle input:checked ~ .menu { transform: scale(1.0); opacity: 1; } /* Underlining menu links when hovered*/ .menuToggle .menu a:hover { background-image: linear-gradient(to bottom, #63646b 33%, transparent 100%); background-position: 0 1em; background-repeat: repeat-x; background-size: 2px 60px; } /* End Hamburger */

 <nav role="navigation"> <div class="menuToggle"> <input type="checkbox" /> <div class="hamburger"> <span></span> <span class="middle"></span> <span></span> <span class="x-line"></span> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </div> </div>