点击一个DIV到底层元素
我有一个background:transparent的div background:transparent ， border 。 在这个div下面，我有更多元素。
目前，我可以点击叠加div之外的基础元素。 但是，直接点击叠加div时，我无法点击底层元素。
我希望能够点击这个div以便我可以点击底层元素。
是的，你可以做到这一点。
使用pointer-events: none IE11的CSS条件语句（在IE10或更低版本中不起作用），您可以获得针对此问题的跨浏览器兼容解决方案。
使用AlphaImageLoader ，你甚至可以把透明.PNG/.GIF S IN覆盖div并获得了点击流过的元件下方。
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）中的指针事件，但仍然为其子元素启用它。
如果您使用多个重叠的div图层，您希望能够单击子元素，同时让父图层根本不响应任何鼠标事件，这会很有帮助。 对于这个所有的父母divs得到pointer-events: none ，其可点击的孩子得到指针事件重新启用pointer-events: 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>
点击浏览器中不同的底层元素的DIV。 Opera需要手动事件转发，Firefox和Chrome了解CSS pointer-events:none; IE不需要透明背景的任何东西; 例如background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE需要像Opera一样转发。
请参阅http://jsfiddle.net/vovcat/wf25Q/1/和http://caniuse.com/pointer-events上的转发测试。 指针事件CSS属性已从CSS3-UI移至CSS4-UI。
链接地址: http://www.djcxy.com/p/4705.html