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