Question

想象一下我所拥有的这种情况：

此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？

原因是，我希望有一个覆盖整个页面的效果，但仍允许导航和使用下面的内容。

我错过了什么，有办法吗？或者这不可能吗？

提前谢谢。

FIDDLE STARTUP

解决方案：检查Bellow Please。

Addind this以通知解决方案具有以下兼容性。

Chrome - iOS - Android：是的 Safari： 4.0+
Firefox： 3.6+
歌剧： 15.0+
IE： 9+

Answer 1

您只需将pointer-events: none;添加到.overlay

即可

请参阅http://jsfiddle.net/iamnotsam/DV49T/1/ 将SVG用于IE9和IE10兼容性

对于IE 10，只有pointer-events: none的部分支持，特别是该元素必须是svg。上述小提琴已经在一台机器上得到验证，因为IE9和IE10很开心。感谢OP的测试。

Answer 2

这是一个我认为可以帮助你的例子。如果您希望链接只是激活另一个元素，那么请使用#Something链接。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target

something:target
{}

以下是课程http://www.w3schools.com/cssref/css_selectors.asp

以下是您更新的http://jsfiddle.net/DrewGoldsberry/5tGC7/1/

这不适用于jsfiddle，但你可以在w3schools进行测试

点击“叠加”

2 个答案: