CSS星空动画层因覆盖整个视口且z-index较高,拦截了所有鼠标事件,导致页面内链和锚点跳转失效;只需为动画容器添加pointer-events: none即可恢复交互功能。
这个问题的根源其实很简单:一个全屏覆盖的CSS动画层,因为z-index值太高,把整个视口的鼠标事件都“截胡”了,导致页面里的超链接——无论是锚点跳转还是外部链接——全都无法点击。真正的原因,跟JavaScript无关,也不是HTML结构出了差错——问题出在CSS的层叠机制和事件捕获上。
从你贴出的代码来看,.stars 和它的父容器 #space 都设置了:
position: absolute;top: 0; bottom: 0; left: 0; right: 0;z-index: 99;
这一套组合拳下来,这两个 就稳稳地铺满了整个视口,并且靠着 z-index: 99 高高在上。浏览器在处理点击、悬停这类鼠标事件时,会优先把它交给最上层的元素——哪怕这个元素看起来是透明的、空荡荡的,只要它占着位置,又没有明确说“我不接事件”,它就会把底下所有链接的交互都挡在门外。
✅ 正确的修复思路是:**保留视觉上的星空效果,同时让这个装饰层“透明”地穿过鼠标事件**。只需要在原有CSS里加上一行:
#space, .stars { pointer-events: none;}
⚠️ 这里有几个细节值得注意:
pointer-events: none只禁用鼠标事件(比如点击、悬停、聚焦),**完全不影响CSS动画的运行、元素的渲染,也不妨碍键盘导航**(比如用Tab键切换焦点仍然有效);- 如果未来某天你希望星空层本身也能响应点击(比如点击星星触发特效),可以换个思路:把
pointer-events: none只加在子元素上,例如.stars > * { pointer-events: none; },同时为特定的交互控件单独启用事件; - 千万别想着通过降低 z-index 来绕开问题——这样做很可能破坏星空的视觉层次,而且容易跟页面上其他定位元素“打架”;
- 也别用
visibility: hidden或opacity: 0来替代,这两个属性虽然会让元素看不见,但并没有放开鼠标事件的拦截——除非你同时加上pointer-events: none。
最终修复后的关键CSS代码段是这样的:
#space, .stars { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; pointer-events: none; /* ← 这一行是关键 */}
加完这一行,页面里的锚点跳转(比如 Here)和所有超链接都会立刻恢复响应,而星空动画效果丝毫不受影响。这是现代CSS处理“装饰性覆盖层”的经典做法,简洁、高效,兼容性也相当不错——所有现代浏览器以及IE11+都支持。
