按钮:hover不触发通常因上层元素物理遮挡，需用开发者工具定位遮挡源；须同时设置position（如relative）和z-index才生效；警惕pointer-events:none、隐式层叠上下文及浮动未清除等问题。

按钮:hover不触发，说明点击区域已被覆盖

这是最直接的信号：按钮渲染正常、文字可见、事件也绑了，但鼠标悬停无反应，基本可断定它被上层元素物理遮挡。打开开发者工具，用「选择元素」工具缓慢拖动鼠标从按钮底部向上移动，观察高亮框是否中途跳转到另一个 div 或 .col 上——一旦跳转，那个元素就是遮挡源。

检查 position 和 z-index 是否同时生效

z-index 对 position: static 完全无效，而动态创建的按钮（如 document.createElement("button")）默认就是 static。光写 button.style.zIndex = "100" 没用。

• 必须同步设置 button.style.position = "relative"（推荐，不脱离文档流）
• 避免用 setAttribute('style', '...') 拼字符串，容易覆盖已有样式；优先用 element.style.xxx
• 若用 CSS 类，确保该类里同时包含 position 和 z-index，例如：.interactive-btn { position: relative; z-index: 100; }

警惕 pointer-events: none 和隐式层叠上下文

即使 z-index 和 position 都对了，也可能点不动——常见静默干扰项：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• pointer-events: none：父级或自身设置了这个，整个元素拒收鼠标事件
• transform、will-change、opacity: 0.99、filter 等属性会意外创建新层叠上下文，让子元素的 z-index 只在内部生效，无法和外部竞争
• 浮动未清除：比如按钮用了 float: right，但父容器没 overflow: hidden 或 ::after 清除，导致后续块级元素的 margin-top 向上延伸覆盖按钮

装饰性元素优先设 pointer-events: none 而非 z-index

按钮旁的 <img class="arrow">、::before 箭头、背景图等纯视觉元素，常因 DOM 顺序靠前而拦截点击。这不是层级问题，而是事件捕获路径问题。

立即学习“前端免费学习笔记（深入）”；

• 给遮挡的图像或伪元素加 pointer-events: none，按钮立刻恢复响应，且图像仍可见
• 该属性不继承，必须直接作用于遮挡元素本身
• 避免用 z-index: -1 压图像：非定位元素上设负值无效，还可能引发不可预期的堆叠错乱

实际排查时，最容易被忽略的是层叠上下文的嵌套关系——不是所有 z-index 都在同一平面比较，父容器一个 transform 就可能把整组按钮“锁”进自己的小世界里。