单击 div 到底层元素

2022-01-30 00:00:00 mouseevent click css layer

我有一个 div，它具有 background:transparent 以及 border.在这个div下面，我有更多的元素.

I have a div that has background:transparent, along with border. Underneath this div, I have more elements.

目前，当我单击覆盖层div 之外时，我能够单击基础元素.但是，当直接单击覆盖 div 时，我无法单击基础元素.

Currently, I'm able to click the underlying elements when I click outside of the overlay div. However, I'm unable to click the underlying elements when clicking directly on the overlay div.

我希望能够点击这个 div 以便我可以点击底层元素.

I want to be able to click through this div so that I can click on the underlying elements.

推荐答案

是的，你可以这样做.

使用 pointer-events: none 和 IE11 的 CSS 条件语句(不适用于 IE10 或更低版本)，您可以获得针对此问题的跨浏览器兼容解决方案.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

使用 AlphaImageLoader，您甚至可以将透明的 .PNG/.GIF 放在覆盖层 div 中，并让点击流向下方的元素.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none; background: url('your_transparent.png');

IE11 条件:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background: none !important;

这是一个基本示例页面包含所有代码.

Here is a basic example page with all the code.

相关文章