点击通过 “叠加”

此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

SOLUTION：检查娄请。

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

铬 - iOS设备 - 安卓：没错
Safari浏览器： 4.0+
火狐： 3.6+
歌剧： 15.0+
IE： 9+

来源

2014-04-12 Hélio C

在完成时，这就是所谓的点击劫持测试恶意的方式。请仔细阅读攻击和浏览器的相关措施，以便更好地了解为什么此行为不总是安全或受信任。 – Anthony

你只需要添加pointer-events: none;至.overlay

参见http://jsfiddle.net/iamnotsam/DV49T/1/使用SVG为IE9和IE10兼容性

对于IE 10，仅存在用于pointer-events: none部分支持，特别是元件必须是SVG。上述小提琴已经在一台机器上验证了让IE9和IE10开心。感谢OP进行测试。

来源

2014-04-12 02:45:35 iamnotsam

+1这是有效的，但我们心爱的IE -10不会。任何解决旧版本的问题？先谢谢你。 –

也等一下我编辑jsfiddle与svg一起工作，很遗憾我无法测试它，因为我没有ie10 – iamnotsam

好的，看看是否有用。如果其他线程的建议很简单，那么我会感到惊讶。 – iamnotsam

这是一个我认为会帮助你的例子。如果你想链接只是激活另一个元素的东西，然后使用#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工作，但你可以在W3School

来源

2014-04-12 03:03:30 DrewGoldsberry

我很欣赏你的回答和时间，但我想你并不完全明白我需要什么。正确的行为与问题中所解释的一样，标记为正确的答案正是我所需要的。不管怎样，谢谢你。 Best.HC –

对不起，想念阅读的问题。 – DrewGoldsberry

点击通过 “叠加”

回答

相关问题