Hamburger菜单遮罩问题：未展开时遮挡底层按钮点击

问题核心 #

菜单收起（checkbox未选中）时，.menu元素仍覆盖整个视口，导致底层的Read More按钮无法被点击。尝试过visibility:hidden/collapse（仍占空间）、display:none（破坏动画）、transform:scale(0)（保留原空间）都无法同时解决点击阻挡和平滑动画的问题。

解决方案 #

通过pointer-events属性控制元素是否接收鼠标事件，配合checkbox状态切换，既保留平滑动画，又解决点击阻挡问题：

修改CSS中的以下部分：

/* Menu */
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;  
  visibility: hidden;
  pointer-events: none; /* 收起时不接收点击事件 */
  transition: visibility var(--menu-speed);
}

/* When Hamburger Menu is Checked */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
  pointer-events: auto; /* 展开时恢复点击事件 */
}

同时移除.menu-wrap .toggler:checked ~ .menu > .menu-shrink中的display: flex，因为初始状态下.menu-shrink已经设置为display: flex，无需重复定义。

原理说明 #

• pointer-events: none：让元素完全忽略鼠标点击、hover等事件，即使它在视觉上占据空间，底层元素也能正常响应交互。
• 配合checkbox的:checked伪类，在菜单展开时恢复pointer-events: auto，保证菜单内的链接可以正常点击。
• 保留transform: scale(0)和过渡动画，实现菜单的平滑缩放效果，同时不会破坏交互逻辑。

修改后的完整CSS（关键部分已更新） #

:root {
  --primary-color: rgba(0, 0, 0, 0.75);
  --secondary-color: rgba(255, 255, 255, 0.1);
  --overlay-color: rgba(0, 0, 0, 0.8);
  --menu-speed: .7s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

a {
  text-decoration: none;
  color: white;
}

ul {
  list-style: none;
}

/* Showcase-Header */

.container {
  max-width: 960px;
  margin: auto;
  padding: 0 3rem;
  overflow: hidden;
  background-color: var(--primary-color);
}

#showcase {
  position: relative;
  background: var(--primary-color);
  color: white;
  height: 100vh;
}

#showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: url(./img/pexels-darius-krause-2228152.jpeg) no-repeat center
    center/cover;
  z-index: -1;
}

#showcase .showcase-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#showcase h1 {
  font-size: 3rem;
}

.btn {
  display: inline-block;
  border: none;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  background-color: var(--secondary-color);
   backdrop-filter: saturate(190%) blur(3px);
  transition: all 0.2s;
  border-radius: 10px;
}

.btn:hover {
  background: rgba(0, 0, 0, 1);
  color: white;
  box-shadow: 0px 0px 10px 1px;
}

/* Hamburger Menu (Mobile) */

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  height: 50px;
  width: 50px;

  opacity: 0;
  z-index: 2;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  padding: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* hambuerger menu lines */

.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background-color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hanburder lines Top and Bottom */

.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  top: -10px;
  height: 2px;
  width: 100%;
  background: inherit;
  z-index: 1;
}

.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */

.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns lines into X */

.menu-wrap .toggler:checked + .hamburger > div::before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate on hover when checked */

.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(360deg);
}

/* When Hamburger Menu is Checked */

.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
  pointer-events: auto;
}

.menu-wrap .toggler:checked ~ .menu > .menu-shrink {
  transform: scale(1);
  transition-duration: 0.4s;
}

.menu-wrap .toggler:checked ~ .menu > .menu-shrink > .menu-fade {
  opacity: 1;
  transition: opacity 3s 0.3s;
}

/* Menu */

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;  
  visibility: hidden;
  pointer-events: none;
  transition: visibility var(--menu-speed);
}

.menu-wrap .menu > .menu-shrink {
  background-color: var(--overlay-color);
  backdrop-filter: saturate(190%) blur(3px);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: all var(--menu-speed);
}

.menu-wrap .menu > .menu-shrink > .menu-fade {
  text-align: center;
  height: 100vh;
  width: 88vw;
  opacity: 0;
  transition: opacity 0.3s;
}

.menu-wrap .menu > .menu-shrink > .menu-fade > ul {
  height: 100%;
  width: 100%;
  padding: 10% 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.menu-wrap .menu > .menu-shrink > .menu-fade > ul > li {
  font-size: 1.5rem;
  opacity: 0.85;
  transition: all 0.2s;
}

/* Menu Effects Once Open */

.hover-grow {
  transition: all 0.5s;
}

.hover-grow:hover {
  transform: scale(2);
  opacity: 1;
  text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.1);
}

验证效果 #

修改后：

• 菜单收起时，底层的Read More按钮可以正常点击
• 菜单展开/收起的平滑缩放动画保留
• 菜单内的链接在展开时可以正常交互

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