Javascript 为什么我的切换菜单在处理媒体查询时不显示：悬停的效果？

我已经创建了一个切换导航，点击一个按钮，导航栏就会弹出，桌面上的一切都很好。当我使其响应切换导航没有问题，除了它不会显示移动菜单itmes:hover类的样式。我不太确定我做错了什么……这一定是CSS的问题，但我无法理解。非常感谢您的帮助，谢谢

HTML

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;



}

---

媒体查询中缺少右尖括号

}

，因此无法呈现这些样式。我在媒体查询中添加了

背景色：红色

，向您展示它的工作原理

。菜单btn{
颜色：#4f6df5；
字号：1.1rem；
字号：900；
光标：指针；
填充：1rem；
显示器：flex；
}
.手机菜单{
显示器：flex；
弯曲方向：立柱；
列表样式：无；
高度：100vh；
宽度：50%；
填充：40px；
}
.移动菜单项{
字体大小：.9rem；
文字装饰：无；
颜色：#2424；
线高：4；
显示：块；
}
.移动菜单项：悬停{
背景：4f6df5；
填充：.5rem；
颜色：白色；
显示：块；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.菜单btn{
显示器：flex；
背景色：红色；
}
}

您不是在为

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

所以它没有显示悬停效应，

---

检查更新的

您能提供一个工作的小提琴吗？我可以检查它吗？它在小提琴上工作，但在我的本地机器上不工作。我的本地机器上有很多代码，所以我只是把有问题的代码片段放到这里。

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



}

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