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