Javascript 悬停效果后单击

我正试图为我未来的投资组合创建一个网页 这是我的链接，这是我的代码：

@font-face{
字体系列：“Antic Slab”；
src:url（'AnticSlab-Regular.ttf'）；
}
.导航{
位置：固定；
排名：0；
右：0；
z指数：1；
}
.导航#chbox{
位置：绝对位置；
排名：0；
右：0；
高度：50px；
宽度：50px；
z指数：2；
光标：指针；
不透明度：0；
}
.包装纸.汉堡包{
位置：绝对位置；
排名：0；
右：0；
z指数：1；
宽度：60px；
高度：60px；
填充：1rem；
}
.wrapper.hamburger>div{
z指数：1；
位置：相对位置；
显示：块；
宽度：100%；
高度：2倍；
背景：#fff；
过渡：所有0.4s缓解；
}
.wrapper.hamburger.div1{
顶部：0px；
}
.包装纸.汉堡包.第2课{
顶部：10px；
}
.包装纸.汉堡包.第3课{
顶部：20px；
}
.navigation#chbox:选中+.wrapper.hamburger>.div1{
变换：旋转（-28度）；
宽度：90%；
高度：3倍；
边界半径：1px；
}
.navigation#chbox:选中+.wrapper.hamburger>.div2{
变换：旋转（90度）translateY（-25px）；
宽度：90%；
高度：3倍；
边界半径：1px；
}
.navigation#chbox:选中+.wrapper.hamburger>.div3{
变换：旋转（28度）；
宽度：90%；
高度：3倍；
边界半径：1px；
}
.wrapper#菜单{
显示器：flex；
溢出：隐藏；
宽度：0；
文字装饰：无；
文本对齐：居中；
证明项目：中心；
右边距：100px；
背景色：蓝紫色；
过渡期：0.5秒；
身高：0；
}
.wrapper#菜单a{
文字装饰：无；
列表样式：无；
左边距：1米；
字体大小：25px；
字体系列：Antic Slab；
}
.navigation#chbox:选中。包装器#菜单：悬停{
宽度：100%；
身高：100%；
}
@导入“firefly.css”；
@字体{
字体系列：“Antic Slab”；
src:url（'AnticSlab-Regular.ttf'）；
}
身体{
背景色：rgba（124、110、204、0.376）；
保证金：0；
}
.box1{
顺序：1；
高度：100vh；
显示：网格；
网格模板行：10%60%15%15%；
边框：1px黑色实心；
栅隙：10px；
背景：线性梯度（右下角，rgb（26,28,32）0%，rgb（49,54,66）100%）；
背景尺寸：210vh 200vh；
}
.主词{
字体大小：50px；
左：25%；
垫面：10%；
颜色：rgb（230219200）；
字体系列：Antic Slab；
游标：默认值；
}
.main word>#main 1{
文本对齐：左对齐；
动画名称：主；
动画持续时间：2秒；
}
.main word>#main 2{
动画名称：主；
动画持续时间：4s；
}
#main2>span{
颜色：rgb（144132189）；
}
.main word>#main 3{
动画名称：主；
动画持续时间：6s；
}
@主关键帧{
0% {
不透明度：0；
}
20%{
不透明度：0.2；
过滤器：模糊（8px）；
}
40%{
不透明度：0.4；
过滤器：模糊（6px）；
}
60% {
不透明度：0.6；
过滤器：模糊（4px）；
}
80%{
不透明度：0.8；
过滤器：模糊（2px）；
}
100%{
不透明度：1；
}
}   
.写下来{
字体大小：30px；
文本对齐：居中；
填充：5%；
颜色：白色；
}
.向下箭头{
宽度：30px；
高度：30px；
边框：纯白；
边框宽度：0 3px 3px 0；
显示：内联块；
填充：3倍；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.箭头1{
文本对齐：居中；
垫底：20px；
}
.box2{
z指数：1；
}
.box3{
高度：200vh；
背景色：继承；
}
.box4{
背景尺寸：210vh 200vh；
}
标题{
背景色：rgba（70127165,0.123）；
边界半径：10px；
}

迟到者


你好
我是卡加蒂
这是我的网页
是的，那个就是我
是的，就是我

您需要添加一个开放类

.wrapper#menu.show{
宽度：300px；
身高：100%；
过渡：宽度1s线性；
}

并将其切换为悬停

let elm=document.querySelector（'.hamburger'）；
函数切换菜单（）{
document.querySelector（“#menu”）.classList.toggle（'show'）；
}
elm.onmouseinter=切换菜单；
elm.onmouseleave=切换菜单；

---

您当前的css中有一些行为错误，因此清理它将解决一些小问题。

您是否添加了其他内容或对代码做了任何操作，我无法使其工作，它在这里工作，但在我的笔记本电脑或代码中不工作，我是否必须添加除标记之外的任何内容？我差一点就要弄坏我的笔记本电脑了……别这么想，你可以随时比较彼此旁边的类型别忘了我的答案中有css和js。好吧，我想从一开始就重写代码，在我添加你的代码后，看看会发生什么，谢谢你的帮助[