与其他Div下的Divs交互(低Z-索引传递)
与其他Div下的Divs交互(低Z-索引传递)
提问于 2021-01-05 08:11:00
我有一个网页，其中两个div是在对方的顶部，两者都是相同的宽度，所以顶部的div完全覆盖底部div。挑战:我需要用户能够与较低的div交互。所谓交互，我指的是点击、悬停(在JS中使用mouseenter和mouseleave确定)、突出显示文本等。
我已经熟悉了pointer-events (正如讨论过的这里)，但是将其设置为顶级div上的none并没有解决这个问题。有什么我可以做的，使低div互动，而不把它放在上面的div (即不改变其z-索引)？请注意，我没有显式地在任何一个div上设置z索引；它是根据文档中的顺序设置的。
更新：这里有一个CodePen演示了这种行为的一个例子。在我使用的实际代码中，.upper包含嵌套元素，按钮动画在JS (使用GSAP)中运行，而不是作为CSS动画运行。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-05 19:02:25
修正了--非常感谢那些在评论中帮忙的人！使用pointer-events: none确实是一个解决办法，但问题在于哪些元素。ScrollMagic将所有固定元素封装在另一个div中，该类允许您更改:固定时，按照.setPin(element, { spacerClass: <the name of a class with pointer-events disabled> })使用这个例子出现在魔术的网站上。然后，对于仍然应该是交互式的固定容器中的每个元素，将pointer-events: all添加到其样式中。在语义上可能有一种更好的方法可以将多个元素固定在一起而不存在交互问题，但这是我能找到的最简单的修复方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65575167
复制相关文章
相似问题
腾讯云开发者
