页面课程按钮无法点击求助（已设置pointer-events:none）

问题根源 #

你给<html>和<body>都设置了pointer-events: none，这会导致整个页面所有元素都无法接收鼠标事件（包括点击、hover），因为该属性会被子元素继承，即便按钮本身未设置，也会因父容器的限制而失效。

修复步骤 #

• 移除全局事件禁用：删除html和body选择器中的pointer-events: none声明，这是解决点击问题的核心。
• 按需设置穿透元素：若确实需要特定元素（如背景层）允许鼠标事件穿透，仅给这些元素单独设置pointer-events: none，而非全局禁用。
• 验证按钮交互：按钮的hover样式本身逻辑正确，父容器的事件限制移除后，hover和点击就能正常触发。

修改后的CSS核心代码 #

* {
    margin: 0;
    padding: 0;
}

/* 移除html的pointer-events:none */
html {
    /* pointer-events: none; 已删除此行 */
}

body {
    background-color: #2D2D2D;
    color: #ffffff;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    font-family: "Krub", sans-serif;
    /* 移除body的pointer-events:none */
    /* pointer-events: none; 已删除此行 */
}

/* 其余样式保持不变 */
a, button {
    color: #ffffff; 
}

额外优化提示 #

• 修正HTML拼写错误：导航栏中的<a hef="">应改为<a href="">，避免链接功能失效。
• 检查嵌套容器：对于.circle包裹的按钮，确保.circle未设置pointer-events:none，若有则需改为auto或移除该声明。

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