单击 div 到底层元素

我有一个background:transparent的div background:transparent ， border 。在这个div下面，我有更多的元素。

目前，当我点击叠加div外部时，我可以单击基础元素。但是，当直接单击 overlay div时，我无法单击基础元素。

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

我的问题

css

答案

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

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

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

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 图层，您希望能够单击子元素，同时让父图层对任何鼠标事件都没有反应，这将非常有用。为此，所有父级 div 都获得pointer-events: none及其可点击的子节点通过pointer-events: auto事件重新启用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); IE 需要转发像 Opera。

请参阅转发测试 http://jsfiddle.net/vovcat/wf25Q/1/和 http://caniuse.com/pointer-events 。指针事件 CSS 属性已从 CSS3-UI 移至 CSS4-UI。