与其他 Div 下的 Div 交互（较低的 Z 索引直通）
Interacting with Divs Under Other Divs (Lower Z-Index Passthrough)
我有一个网页，其中两个 div 彼此重叠，并且宽度相同，因此顶部 div 完全覆盖了底部 div。挑战：我需要用户能够与较低 div 互动。通过交互，我的意思是单击、悬停（在 JS 中使用 mouseenter 和 mouseleave 确定）、突出显示文本等
我已经熟悉 pointer-events（正如 here 所讨论的那样），但是将其设置为 div 顶部的 none 并没有解决问题。我可以做些什么来使较低的 div 交互而不将其放置在较高的 div 上方（即不更改其 z-index）？请注意，我还没有在 div 上明确设置 z-index；它是由他们在文档中的顺序设置的。
更新： 这是一个演示此行为示例的 CodePen。在我使用的实际代码中，.upper 包含嵌套元素，按钮动画在 JS（使用 GSAP）中是 运行 而不是 CSS 动画。
已修复--非常感谢评论中提供帮助的人！使用 pointer-events: none 确实是解决方法，但问题在于哪些元素。 ScrollMagic 将所有固定元素包装在另一个 div 中，它的 class 允许您更改：固定时，按照 this example on ScrollMagic's website 使用 .setPin(element, { spacerClass: <the name of a class with pointer-events disabled> })。然后，对于固定容器中仍应交互的每个元素，将 pointer-events: all 添加到其样式。可能有一种语义上更好的方法来固定多个元素而不会出现交互问题，但这是我能找到的最简单的修复方法。
我有一个网页，其中两个 div 彼此重叠，并且宽度相同，因此顶部 div 完全覆盖了底部 div。挑战：我需要用户能够与较低 div 互动。通过交互，我的意思是单击、悬停（在 JS 中使用 mouseenter 和 mouseleave 确定）、突出显示文本等
我已经熟悉 pointer-events（正如 here 所讨论的那样），但是将其设置为 div 顶部的 none 并没有解决问题。我可以做些什么来使较低的 div 交互而不将其放置在较高的 div 上方（即不更改其 z-index）？请注意，我还没有在 div 上明确设置 z-index；它是由他们在文档中的顺序设置的。
更新： 这是一个演示此行为示例的 CodePen。在我使用的实际代码中，.upper 包含嵌套元素，按钮动画在 JS（使用 GSAP）中是 运行 而不是 CSS 动画。
已修复--非常感谢评论中提供帮助的人！使用 pointer-events: none 确实是解决方法，但问题在于哪些元素。 ScrollMagic 将所有固定元素包装在另一个 div 中，它的 class 允许您更改：固定时，按照 this example on ScrollMagic's website 使用 .setPin(element, { spacerClass: <the name of a class with pointer-events disabled> })。然后，对于固定容器中仍应交互的每个元素，将 pointer-events: all 添加到其样式。可能有一种语义上更好的方法来固定多个元素而不会出现交互问题，但这是我能找到的最简单的修复方法。