想象一下，你有一个 div，它的背景是透明的，还有边框。

在这个 div 下，我们还有其他不同的元素。
我们想通过 div 单击这些底层元素。
这会给大多数开发人员带来问题，因为他们只能在单击覆盖 <div> 外部的情况下单击底层元素。

如果你有这样的问题，那么这个片段适合你。
让我们深入研究并尝试一起做。

添加 CSS

• 我们可以使用 CSS 指针事件属性的“none”值来解决这个问题。

在使用这个值的情况下，元素不会对指针事件做出反应。

• 借助 CSS 背景属性放置透明背景。

pointer-events: none; 
background: url(background);

让我们看看整个代码。

单击 div 到其底层元素的示例：

The whole code is needed

使用 AlphaImageLoader 过滤器，我们甚至可以将透明的 PNG 或者 GIF 放在叠加层 div 中，然后通过 div 单击它。

使用 AlphaImageLoader 过滤器的示例：

The whole code is needed

解决此问题的另一种方法是禁用父元素中的指针事件，而为其子元素启用它。
当我们使用各种重叠的 div 层时，这很有用，我们希望子元素对指针事件做出反应，但父元素不。

其中我们需要对父 div 使用指针事件属性的“none”值，对子 div 使用“auto”值。

具有“none”和“auto”值的指针事件属性示例。

.parent { pointer-events:none; } 
.child { pointer-events:auto; } 
<div class="some-container"> 
<ul class="layer-0 parent"> 
<li class="click-me child"></li> 
<li class="click-me child"></li> 
</ul> 
<ul class="layer-1 parent"> 
<li class="click-me-also child"></li> 
<li class="click-me-also child"></li> 
</ul> 
</div>

添加 HTML

An HTML code is needed.