javascript - 为什么我的切换菜单不显示 :hover when working with media queries? 的效果

Question

我创建了一个 Toggle Nav，您可以在其中单击一个按钮，导航栏会弹出，并且在桌面上一切正常。当我让它响应时，Toggle Nav 没有问题，除了它不会显示 mobile-menu-itmes:hover 类的样式。不太确定我做错了什么......它必须与 CSS 相关，但我无法弄清楚。感谢任何帮助，谢谢。

HTML

  <div class="menu-btn" id="toggle-btn">
    <i class="fas fa-bars fa-2x"></i>
    <div class="mobile-menu">
      <li><a class="mobile-menu-items" href="#">Home</a></li>
      <li><a class="mobile-menu-items" href="#">About</a></li>
      <li><a class="mobile-menu-items" href="#">Services</a></li>
      <li><a class="mobile-menu-items" href="#">Portfolio</a></li>

    </div>
  </div>

SCSS

 .menu-btn {
  color: #4f6df5;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  padding: 1rem;
  display: none;


.mobile-menu {
  display: none;
  flex-direction: column;
  list-style: none;
  height: 100vh;
  width: 50%;
  padding: 40px;

  .mobile-menu-items {
    font-size: .9rem;
    text-decoration: none;
    color: #242424;
    line-height: 4;
    display: block;
  }

  .mobile-menu-items:hover {
    background: #4f6df5;
    padding: .5rem;
    color: white;
    display: block;
   }
 }
}

Javascript

const menuBtn = document.querySelector('#toggle-btn');
const mobileMenu = document.querySelector('.mobile-menu');

menuBtn.addEventListener('click', clickedBtn);

function clickedBtn() {
//mobileMenu.classList.toggle("mobile-menu");

if (mobileMenu.style.display === 'none') {
    mobileMenu.style.display = 'block';
} else {
    mobileMenu.style.display = 'none';
   }
}

媒体查询

@media screen and (max-width: 768px) {
.menu-btn {
display: flex;



}

Answer 1

您的媒体查询中缺少右花括号 }，因此它不会呈现这些样式。我已将 background-color: red 添加到媒体查询中以向您展示它的工作原理。

.menu-btn {
  color: #4f6df5;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  padding: 1rem;
  display: flex;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  height: 100vh;
  width: 50%;
  padding: 40px;
}

.mobile-menu-items {
  font-size: .9rem;
  text-decoration: none;
  color: #242424;
  line-height: 4;
  display: block;
}

.mobile-menu-items:hover {
  background: #4f6df5;
  padding: .5rem;
  color: white;
  display: block;
}

@media screen and (max-width: 768px) {
  .menu-btn {
    display: flex;
    background-color: red;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous" />

<div class="menu-btn" id="toggle-btn">
  <i class="fas fa-bars fa-2x"></i>
  <div class="mobile-menu">
    <li><a class="mobile-menu-items" href="#">Home</a></li>
    <li><a class="mobile-menu-items" href="#">About</a></li>
    <li><a class="mobile-menu-items" href="#">Services</a></li>
    <li><a class="mobile-menu-items" href="#">Portfolio</a></li>
  </div>
</div>

编辑:SCSS 是 CSS 的超集，因此您可以移动 .menu-btn 和 .mobile-menu 的大括号回到你最初拥有它们的地方，它会完全一样。很遗憾，SO 代码片段不支持 SCSS。