I have a webpage where two divs are on top of each other, and both are the same width, so the top div completely covers the bottom div. The challenge: I need users to be able to interact with the lower div. By interact, I mean click, hover (as determined using mouseenter and mouseleave in JS), highlight text, etc.
I'm already familiar with pointer-events (as discussed here), but setting it to none on the top div hasn't resolved the issue. Is there anything I can do to make the lower div interactive without placing it above the upper div (i.e. without changing its z-index)? Note that I haven't explicitly set the z-index on either div; it's set by their order in the document.
Update: Here's a CodePen demonstrating an example of this behavior. In the actual code I'm working with, .upper contains nested elements, and the button animation is run in JS (using GSAP) rather than as a CSS animation.
Fixed--many thanks to those in the comments who helped! Using pointer-events: none was indeed the fix, but the question was on which elements. ScrollMagic wraps all pinned elements in another div whose class it allows you to change: when pinning, use .setPin(element, { spacerClass: <the name of a class with pointer-events disabled> }), as per this example on ScrollMagic's website. Then, for each element in the pinned container that should still be interactive, add pointer-events: all to its style. There's likely a semantically better way to pin multiple elements without interaction issues, but this was the simplest fix I could find.