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

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

成都创新互联公司专注于响水网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供响水营销型网站建设,响水网站制作、响水网页设计、响水网站官网定制、小程序开发服务,打造响水网络公司原创品牌,更为您提供响水网站排名全网营销落地服务。

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

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

CSS:pointer-events

.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":"");

}

}

php中文网



php中文网

开启穿透点击




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

关于“css中的pointer-events属性有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前标题:css中的pointer-events属性有什么用
分享URL:http://azwzsj.com/article/ggcsgj.html

其他资讯