Question

我有一个非常复杂的问题，解释它并不容易，但我在这里：

我正在制作视差效果，我有几张图像，彼此分层。在其中一些图层中，我想要有可点击的按钮（我在图层上应用的转换也必须应用在按钮上）。

这就是视差看起来像DOM的方式：

<div class="parallax">
  <div class="parallax-layer" data-depth="0.9" data-layer="2">
    <div class="button" data-chapter="1">
      The Button
    </div>
  </div>
  <div class="parallax-layer" data-depth="1.0" data-layer="1">
  </div>
</div>

我使用的Parallax插件使用3d变换，但只能通过x / y轴移动图层。问题在于，根据图层高度，按钮可以被他上方的图层覆盖，即使它是可见的，也无法点击它（背景是具有透明度的PNG）。

目前，我实施的解决方案包括在“按钮”div上添加变换，并使用z轴向前移动。此解决方案适用于Chrome和Firefox，但不会更改Safari或Internet Explorer 8/9/10上的任何内容。

我正在寻找另一种选择。对于易于实现的事情的任何建议？

Answer 1

您可以使用CSS pointer-events: none;

禁用没有按钮的图层部分的事件

将元素向前推，使它们可以点击

1 个答案: