问题描述
我有一个div和border，其中div具有background:transparent.在此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.
推荐答案
是的，您可以执行此操作.
Yes, you CAN do this.
使用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;
这是基本示例页面包含所有代码.
这篇关于单击div进入基础元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！