單擊時漢堡選單覆寫不會顯示 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
uj5u.com熱心網友回復：
您需要添加z-index上.menuToggle input并.menuToggle .hamburger請檢查下面的答案希望它的作品。
/* 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>uj5u.com熱心網友回復：
您可以通過在 CSS 中像這樣調整 z 層來修復 X ??按鈕：
.menuToggle input:checked .hamburger > .middle {
opacity: 1;
transform: rotate(135deg);
z-index: 1;
}
.menuToggle input:checked .hamburger > .x-line {
opacity: 1;
transform: rotate(45deg);
z-index: 1;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358356.html