为什么我的 CSS animation 打不通？ 单击菜单按钮后，@media 部分中的 .rightbox 部分（菜单）不会出现

Question

 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap'); :root { --background-color: rgb(129, 19, 159); --font-color: rgb(250, 248, 225); --font-color-hover: rgb(32, 221, 63); --menu-icon-color: rgb(245, 245, 245); --white-color: rgb(255, 255, 255); --black-color: rgb(0, 0, 0); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Raleway', sans-serif; color: var(--font-color); }.navbar { background-color: var(--background-color); display: flex; justify-content: space-around; align-items: center; /* position: fixed; */ width: 100%; padding: 10px; box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); -webkit-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); -moz-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); } /* LEFT PART */.leftbox-logo h1, .leftbox-logo p { line-height: 1.8rem; cursor: pointer; padding: 0; margin: 0; }.leftbox-logo h1 { font-weight: 900; font-size: 2rem; }.leftbox-logo p { font-size: 1rem; padding-left: 30px; }.leftbox-logo h1:hover, .leftbox-logo p:hover { color: var(--font-color-hover); } /* HIDDEN NOW */.menu-button { display: none; } /* RIGHT PART */.rightbox ul { display: flex; list-style: none; }.rightbox ul li a { padding: 10px; text-decoration: none; width: max-content; }.rightbox ul li a:hover { background-color: var(--white-color); border-radius: 7px; color: var(--black-color); } /* MEDIA */ @media screen and (max-width: 800px) {.navbar { display: flex; flex-direction: column; }.leftbox { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }.menu-button { background-color: transparent; border: none; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; position: relative; }.menu-icon, .menu-icon::before, .menu-icon::after { background-color: var(--menu-icon-color); width: 40px; height: 5px; border-radius: 5px; position: absolute; transition: all 1.3s; }.menu-icon::before, .menu-icon::after { content: ""; }.menu-icon::before { transform: translate(-20px, -12px); }.menu-icon::after { transform: translate(-20px, 12px); }:is(.menu-button:active, .menu-button:focus-within).menu-icon { background-color: transparent; transform: rotate(720deg) }:is(.menu-button:active, .menu-button:focus-within).menu-icon::before { transform: translateX(-20px) rotate(45deg); }:is(.menu-button:active, .menu-button:focus-within).menu-icon::after { transform: translateX(-20px) rotate(-45deg); } **HERE, WHY IT DOESTN'T WORK:is(.menu-button:active, .menu-button:focus-within).rightbox { *display: block; * }.rightbox { background-color: var(--background-color); * display: none; * transform-origin: top center; animation: showMenu 0.5s ease-in-out forwards; } ** @keyframes showMenu { 0% { transform: scaleY(0); } 80% { transform: scaleY(0.8); } 100% { transform: scaleY(1); } }.rightbox ul { list-style-type: none; display: flex; flex-flow: column nowrap; }.rightbox li { padding: 0.4rem; }.rightbox a { display: block; text-align: center; width: 80%; margin: auto; } }

 <nav class="navbar"> <div class="leftbox"> <div class="leftbox-logo"> <h1>Navbar</h1> <p>Pet Project's / Day1</p> </div> <button class="menu-button"> <div class="menu-icon"></div> </button> </div> <div class="rightbox"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav>

Why my CSS animation doesn't work? .rightbox part (menu) in @media part does not appear after click on menu-button.

I try to exchange the navbar menu to hide it in the button and call when clicked the button. Menu icon is work, but rightbox doesn't. DISPLAY: NONE doesn't change to DISPLAY: BLOCK in that part:is(.menu-button:active, .menu-button:focus-within).rightbox {}

Answer 1

It doesn't work because

 :is(.menu-button:active, .menu-button:focus-within) .rightbox {
   display: block;
  }

requires .rightbox to be a child of .menu-button as this rule uses the descendant combinator

To fix this you can use the :has() pseudo class but be aware it's not currently supported across all browsers (yet.). Kevin Powell does a short video on this.

 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap'); :root { --background-color: rgb(129, 19, 159); --font-color: rgb(250, 248, 225); --font-color-hover: rgb(32, 221, 63); --menu-icon-color: rgb(245, 245, 245); --white-color: rgb(255, 255, 255); --black-color: rgb(0, 0, 0); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Raleway', sans-serif; color: var(--font-color); }.navbar { background-color: var(--background-color); display: flex; justify-content: space-around; align-items: center; /* position: fixed; */ width: 100%; padding: 10px; box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); -webkit-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); -moz-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5); } /* LEFT PART */.leftbox-logo h1, .leftbox-logo p { line-height: 1.8rem; cursor: pointer; padding: 0; margin: 0; }.leftbox-logo h1 { font-weight: 900; font-size: 2rem; }.leftbox-logo p { font-size: 1rem; padding-left: 30px; }.leftbox-logo h1:hover, .leftbox-logo p:hover { color: var(--font-color-hover); } /* HIDDEN NOW */.menu-button { display: none; } /* RIGHT PART */.rightbox ul { display: flex; list-style: none; }.rightbox ul li a { padding: 10px; text-decoration: none; width: max-content; }.rightbox ul li a:hover { background-color: var(--white-color); border-radius: 7px; color: var(--black-color); } /* MEDIA */ @media screen and (max-width: 800px) {.navbar { display: flex; flex-direction: column; }.leftbox { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }.menu-button { background-color: transparent; border: none; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; position: relative; }.menu-icon, .menu-icon::before, .menu-icon::after { background-color: var(--menu-icon-color); width: 40px; height: 5px; border-radius: 5px; position: absolute; transition: all 1.3s; }.menu-icon::before, .menu-icon::after { content: ""; }.menu-icon::before { transform: translate(-20px, -12px); }.menu-icon::after { transform: translate(-20px, 12px); }:is(.menu-button:active, .menu-button:focus-within).menu-icon { background-color: transparent; transform: rotate(720deg) }:is(.menu-button:active, .menu-button:focus-within).menu-icon::before { transform: translateX(-20px) rotate(45deg); }:is(.menu-button:active, .menu-button:focus-within).menu-icon::after { transform: translateX(-20px) rotate(-45deg); }.rightbox { background-color: var(--background-color); display: none; transform-origin: top center; animation: showMenu 0.5s ease-in-out forwards; }.navbar:has(:is(.menu-button:active, .menu-button:focus-within)).rightbox { display: block; } ** @keyframes showMenu { 0% { transform: scaleY(0); } 80% { transform: scaleY(0.8); } 100% { transform: scaleY(1); } }.rightbox ul { list-style-type: none; display: flex; flex-flow: column nowrap; }.rightbox li { padding: 0.4rem; }.rightbox a { display: block; text-align: center; width: 80%; margin: auto; } }

 <nav class="navbar"> <div class="leftbox"> <div class="leftbox-logo"> <h1>Navbar</h1> <p>Pet Project's / Day1</p> </div> <button class="menu-button"> <div class="menu-icon"></div> </button> </div> <div class="rightbox"> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav>