重叠div“不可点击”，以便可以访问下面的内容？

Question

我正在使用效果降低不透明度的JPG叠加层，但我希望它仅作为效果，并使该div下方的内容可点击。这是可能的，谢谢:)）））

感谢大家的评论。我想我必须考虑别的因为JPEG覆盖了整个页面：）

Answer 1

有pointer-events:none;但只有少数浏览器现代浏览器（和IE11）支持它。

https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

不，不是。重叠元素将始终拦截点击。一种可能的解决方法是将click事件绑定到覆盖元素，然后获取当前鼠标位置＆amp;将其与下面元素的位置进行比较，以确定该元素是否应该注册点击。但是有可能有更好的方法来实现这一目标。但是，如果没有看到您的代码，我无法知道。

Answer 3

是的，可能的

使用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。

Answer 4

我发现的一个简单技巧，不是非常w3c，是将div封装到一个span中并使用该span类来制作叠加层。 这样整个事情都是可点击的，而div的行为就像一个div