css中的pointer-events属性有什么用

这篇文章将为大家详细讲解有关css中的pointer-events属性有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。

　　现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下：

　　

　　.overlay1{

　　width:80px;

　　height:20px;

　　background:gold;

　　position:absolute;

　　top:5px;

　　left:5px;

　　opacity:0.5;

　　}

　　.overlay2{

　　width:80px;

　　height:20px;

　　background:gold;

　　position:absolute;

　　top:40px;

　　left:5px;

　　opacity:0.5;

　　}

　　.pointer{pointer-events:none;}

　　_window.onload=function(){

　　document.getElementById('chx').onclick=function(){document.getElementById('a').className

　　="overlay1"+((this.checked)?"pointer":"");

　　document.getElementById('b').className

　　="overlay2"+((this.checked)?"pointer":"");

　　}

　　}