设置CSS动画背景的页面内导航链接无法点击与触发hover如何解决

你提供的HTML结构本身不存在语法错误，结合你设置了全站动画背景的前提，问题基本来自CSS样式规则，常见原因和对应解决方法如下：

• 层级被动画背景元素覆盖
  动画背景元素的z-index值高于导航栏，导致背景元素浮在导航上层，挡住了所有交互事件。注意z-index仅在元素设置了非static的position属性时生效，你可以给导航父容器设置更高层级解决：

  .nav {
    position: relative;
    z-index: 999; /* 数值只要高于动画背景元素的z-index即可 */
  }
  

• 交互事件被屏蔽
  导航或其上级元素设置了pointer-events: none属性，该属性会让元素完全忽略所有鼠标、触摸交互。你可以检查.nav、nav、ul、li、a几个元素的CSS规则，移除该属性，或者单独给a标签添加pointer-events: auto覆盖父级规则。
• 背景元素定位覆盖导航区域
  若动画背景元素为fixed或absolute定位，且尺寸刚好覆盖导航所在区域，也会出现遮挡。你可以打开浏览器开发者工具（F12），用元素选择器点击链接所在位置，若选中的是动画背景元素，即可确认是遮挡问题。
• 链接本身样式异常
  若a标签被设置为opacity: 0或者visibility: hidden，也会出现无法交互的情况，直接在开发者工具的元素样式面板就能排查到对应规则。

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