css - 通过div单击底层元素(Click through div to underlying elements)

Question

I have a div that has background:transparent , along with border .

(我有一个具有background:transparent和border的div 。)

Underneath this div , I have more elements.

(在这个div ，我还有更多元素。)

Currently, I'm able to click the underlying elements when I click outside of the overlay div .

(当前，当我在overlay div之外单击时，我可以单击基础元素。)

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

(但是，当直接单击overlay div时，我无法单击基础元素。)

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

(我希望能够单击此div以便可以单击基础元素。)

  ask by Ryan translate from so

Answer 1

Yes, you CAN do this.

(是的，你可以做到这一点。)

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.

(使用pointer-events: none与IE11一起使用的CSS条件语句（在IE10或更低版本中不起作用），您可以获得针对此问题的跨浏览器兼容解决方案。)

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

(使用AlphaImageLoader ，您甚至可以将透明.PNG/.GIF放置在叠加div并使点击流到下面的元素。)

CSS:

(CSS：)

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

IE11 conditional:

(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.

(这是带有所有代码的基本示例页面 。)