JavaScript实现点击汉堡菜单切换active类及解决cursor:pointer不生效问题

问题1：点击汉堡菜单无法切换active类 + 汉堡菜单cursor不生效 #

原因 #

绝对定位的.main元素铺满整个视口，和.menu同为.navbar的子元素，后写的.main默认层级高于先写的.menu，完全遮挡了汉堡菜单，点击操作实际命中的是.main元素，所以汉堡菜单的点击事件不触发，cursor属性也无法生效。

修复方法 #

给.menu添加更高的层级，在CSS的.menu规则中新增z-index: 2;：

.menu {
  max-width: 60rem;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; /* 新增这行 */
}

问题2：read-more对应a标签cursor不生效 #

原因 #

1. HTML标签闭合错误：a标签的结束标签被错写为</a2>，导致标签解析异常，样式无法正确匹配
2. .background设置了z-index: -1，导致其内部的a标签层级过低，存在被上层元素遮挡的可能

修复方法 #

1. 修正HTML中的a标签闭合：把<a href="#">Read more </a2>改为<a href="#">Read more </a>
2. 移除.background规则中的z-index: -1;，或者给.background-blur添加position: relative; z-index: 1;保证内容可被正常点击。

额外检查项 #

如果修复后切换active类成功但页面无变化，是因为你还没有在CSS中编写.container.active对应的样式规则，按需补充即可，示例如下：

.container.active .menu-bar {
  transform: rotate(45deg);
}
.container.active .menu-bar::before {
  transform: rotate(90deg);
  top: 0;
}
.container.active .menu-bar::after {
  display: none;
}

另外你HTML末尾有多余的</div>标签，建议删除避免布局异常。

内容的提问来源于stack exchange，提问作者mike98