Rumah >hujung hadapan web >tutorial css >CSS3中的pointer-events属性介绍
CSS3中的pointer-events属性介绍
- 青灯夜游asal
- 2018-09-25 18:02:372517semak imbas
本章给大家介绍一个css3中超实用的属性：CSS3 pointer-events属性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止Css里的Hover和Active状态的变化触发事件
阻止Javascript点击动作触发的事件
一条CSS可以做许多事情是不是很神奇，我们在看一下兼容性情况如何。
IE 11+
Firefox 3.6＋
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
效果图查看：https://runjs.cn/detail/9rxdbuin
代码：
<!DOCTYPE html>
<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);}
.top span{margin-top:50px;display:inline-block}
</style>
<script id="jquery_183" type="text/javascript" class="library" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<!-- 下方div --> <div class="bottom"> <a href="www.baidu.com">bottom-百度</a> </div>
<!-- 上方div --> <div class="top"><span>我是上层top</span></div>
<button id="btnP">
添加pointer-events
</button>
</div>
</body>
<script>
$('#btnP').click(function(){
$('.top').css('pointer-events', 'none')
})
</script>
</html>以上是CSS3 pointer-events属性介绍的一个实例，大家可以自己动手编译试试，看看效果。
Atas ialah kandungan terperinci CSS3中的pointer-events属性介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css怎么能清除浏览器默认样式？（代码）Artikel seterusnya：如何使用css3制作圆形旋转动画（附完整代码）