点击通过“覆盖” [英] Click through "overlay"

问题描述

想象这种情况，我有：

此HTML

<div class="overlay"></div>

<div class="content">
    <a href="">CAN THIS BE CLICKABLE IN ANY WAY? </a>
</div>

和此CSS

.content {position: relative; width: 100%; height: 100%; z-index:1; padding: 40px;}
.overlay {position: fixed; width: 100%; height: 100%; z-index:2; background-color: rgba(0,0,0,.1);}

要使覆盖之后的索引的div可点击，最好不要使用JavaScript？

Is there a way to make the div that is indexed behind the overlay "clickable" preferably without JavaScript?

这是为什么，我想要一个效果覆盖整个

Reason for this is that, I'd like to have an effect that covers the whole page but still permits the navigation and usage of content underneath.

我缺少一些东西，有没有办法...或者这是不可能的？

Am I missing something, is there a way around... or is this not possible?

提前感谢。

FIDDLE STARTUP

解决方案：请检查Bellow。

SOLUTION: Check Bellow Please.

添加此项以通知该解决方案具有以下兼容性。

Addind this to inform that the solution has the following compatibility.

Chrome - iOS - Android： Yep

Safari： 4.0+

Firefox： 3.6+

Opera： 15.0以上

IE： 9 +

Chrome - iOS - Android: Yep
Safari: 4.0+
Firefox: 3.6+
Opera: 15.0+
IE: 9+

推荐答案

您只需要添加 pointer-events：none; 到 .overlay

查看 http://jsfiddle.net/iamnotsam/DV49T/1/ 使用SVG实现IE9和IE10兼容性

对于IE 10，只有部分支持 pointer-events：none ，特别是元素必须是svg。上面的小提琴已经在一台机器上验证，使IE9和IE10快乐。感谢OP进行测试。

For IE 10, there is only partial support for pointer-events: none, specifically the element must be an svg. The above fiddle has been verified on one machine as making IE9 and IE10 happy. Thanks OP for testing.

这篇关于点击通过“覆盖”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！