叠加在可点击区域 - CSS
@thirtydot如果你知道一个解决方案 仅在一个浏览器的工作原理，我依然 会喜欢这里吧！虽然 更支持更好。
您可以使用pointer-events: none。
浏览器支持：http://caniuse.com/pointer-events（作品无处不在，除了IE10及以上）
该属性对我来说是新的。谢谢你教我新东西！ – 2011-06-04 04:48:22
裹在一个可点击的div覆盖和背景，以及覆盖的不透明度属性设置为东西小于1
如果叠加层只覆盖内容的一部分，那么不在叠加层下面的内容看起来部分透明，这不是我想要的。 – 2011-06-04 01:41:34
他并没有说让可点击的div变暗;他说要在透明的div里面制作覆盖层**，因此可以显示覆盖层并使所有内容都可点击。但是，这仍然不适用于
没有，顶部z-index的元素将具有焦点。但是你可以在覆盖图层上创建另一个透明顶层，这个可以点击。因此：
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
这是因为浏览器无法区分您的PNG是透明的。它只是将其作为图像，并且如果透明像素在其中，则不会通过焦点。 这就是为什么你可以把一个完全空的div与固定和高度，它会被点击。
正如我对@Andre所说的，如果覆盖层仅覆盖可点击区域的一部分（至少不是如果您有像HTML5视频元素那样的复杂可点击区域时），则您的建议不起作用。 – 2011-06-04 01:38:48
那么，如果可点击区域是一个矩形，并且总是在相同的地方，我看不到问题。但是如果你想要另一个形状的区域，或者你想让它在整个电影中移动，那么肯定是对的。 – 2011-06-04 02:02:58
为什么不能有重叠点击？ – 2011-06-04 00:31:59
@如果叠加层只覆盖可点击区域的一部分（至少不是如果您有一个类似于HTML5视频元素的复杂可点击区域），则建议不起作用。 – 2011-06-04 00:55:04
如果我可以这样做，那将是非常棒的：'前景：＃4297cc url（'overlay.png'）;':) – 2011-06-04 01:12:25