css - 单击 div 到底层元素

Question

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

目前，当我在叠加层 div 之外单击时，我能够单击底层元素。但是，当我直接点击叠加层 div 时，我无法点击底层元素。

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

Answer 1

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

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

使用 AlphaImageLoader，您甚至可以将透明的 .PNG/.GIF 放在叠加层 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;

这是一个basic example page包含所有代码。