Javascript 使重叠div“；“不可点击”；这样就可以访问下面的内容了？

我正在使用一个JPG覆盖减少不透明的效果，但我想它只是一个效果，并使下面的div内容可点击。有可能吗，谢谢

---

谢谢大家的评论。我想我得想点别的，因为JPEG覆盖了整个页面：）

不，不是。覆盖元素将始终拦截单击。一种可能的解决方法是将

单击

事件绑定到覆盖元素，然后获取当前鼠标位置并将其与下面元素的位置进行比较，以确定该元素是否应注册单击。但有可能有更好的方法来实现这一点。但是，如果没有看到您的代码，我就无法知道。

有

指针事件：无

但现代浏览器（和IE11）支持它的浏览器很少

是的，这是可能的

使用

指针事件：none

以及针对IE11的CSS条件语句（因为它在IE10或以下版本中不起作用），您可以获得一个跨浏览器兼容的解决方案来实现这一点

使用

AlphaImageLoader

，您甚至可以将透明的

.PNG/.GIF

s放置在覆盖

div

中，并使单击传播到下面的元素

CSS:

IE11有条件：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

---

下面是一个包含所有代码的示例。

我发现的一个简单技巧，尽管不是很w3c，是将div封装到一个span中，并使用该span类创建覆盖。

---

这样，整个事情都可以点击，div的行为就像一个div

我认为正确的术语是命中测试；这在网络上通常是不可能的。我能想到的最快的方法是：把你的内容放在一个包装里，稍微透明一点，然后把JPG放在后面。这很聪明，道格，谢谢：）嘿@pufAmuf，你应该回到这个问题上来，接受安迪的答案，因为这在CSS中是可能的，而你现在接受的答案不再是最好的方式。嗨@Keavon，我现在已经这么做了。谢谢你提醒我！您可以检查浏览器是否支持所有现代浏览器现在都支持此功能。注意：您可以使用

指针事件：auto

使元素再次可单击。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;