CSS3中的pointer-events属性介绍

　　最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。

　　阻止用户的点击动作产生任何效果

　　阻止缺省鼠标指针的显示

　　阻止Css里的Hover和Active状态的变化触发事件

　　阻止Javascript点击动作触发的事件

　　一条CSS可以做许多事情是不是很神奇，我们在看一下兼容性情况如何。

　　IE11+

　　Firefox3.6＋

　　Chrome4.0+

　　Safari6.0

　　Opera15.0

　　iOSSafari6.0

　　AndroidBrowser2.1+

　　AndroidChrome18.0+

　　效果图查看：https://runjs.cn/detail/9rxdbuin

　　代码：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　a.noLink{pointer-events:none;}

　　.bottom{background:yellow;width:100px;height:100px;}

　　.top{width:100px;height:100px;position:absolute;top:0;left:0;background:rgba(0,0,0,.2);}

　　.topspan{margin-top:50px;display:inline-block}

　　</style>

　　<scriptid="jquery_183"type="text/javascript"class="library"src="/js/jquery-1.8.3.min.js"></script>

　　</head>

　　<body>

　　<div>

<divclass="bottom"><ahref="www.baidu.com">bottom-百度</a></div>

<divclass="top"><span>我是上层top</span></div>

　　<buttonid="btnP">

　　添加pointer-events

　　</button>

　　</div>

　　</body>

　　$('#btnP').click(function(){

　　$('.top').css('pointer-events','none')

　　})

　　</script>

　　</html>

　　以上是CSS3pointer-events属性介绍的一个实例，大家可以自己动手编译试试，看看效果。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55299.shtml