欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  最近发现了一个叫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>
 
  <!--下方div--><divclass="bottom"><ahref="www.baidu.com">bottom-百度</a></div>
 
  <!--上方div--><divclass="top"><span>我是上层top</span></div>
 
  <buttonid="btnP">
 
  添加pointer-events
 
  </button>
 
  </div>
 
  </body>
 
  <script>
 
  $('#btnP').click(function(){
 
  $('.top').css('pointer-events','none')
 
  })
 
  </script>
 
  </html>
 
  以上是CSS3pointer-events属性介绍的一个实例,大家可以自己动手编译试试,看看效果。






本文转载自中文网



 

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