javascript - 与其他 div 下的 div 交互（低 Z 索引直通）

Question

我有一个网页，其中两个 div 彼此重叠，并且两者的宽度相同，因此顶部 div 完全覆盖了底部 div。挑战：我需要用户能够与较低的 div 交互。通过交互，我的意思是单击、悬停（在 JS 中使用mouseenter和确定mouseleave）、突出显示文本等。

我已经熟悉pointer-events（如讨论here），但将其设置为none顶部 div 并没有解决问题。我可以做些什么来使下 div 交互而不将它放在上 div 之上（即不改变它的 z-index）？请注意，我没有在任何一个 div 上明确设置 z-index；它是由他们在文档中的顺序设置的。

---

更新：这是一个演示此行为示例的 CodePen。在我正在使用的实际代码中，.upper包含嵌套元素，并且按钮动画在 JS（使用 GSAP）中运行，而不是作为 CSS 动画。

https://codepen.io/jmindel/pen/WNGJjLe

标签： javascripthtmlcssscrollmagic

Answer 1

已修复——非常感谢评论中提供帮助的人！使用pointer-events: none确实是解决方法，但问题在于哪些元素。ScrollMagic 将所有固定元素包装在另一个允许您更改其类的 div 中：固定时，使用.setPin(element, { spacerClass: <the name of a class with pointer-events disabled> })，根据ScrollMagic 网站上的此示例。然后，对于固定容器中仍应可交互的每个元素，添加pointer-events: all其样式。可能有一种语义上更好的方法来固定多个元素而不会出现交互问题，但这是我能找到的最简单的解决方法。