CSS3中的pointer-events屬性介紹
- 青灯夜游原創
- 2018-09-25 18:02:372526瀏覽
本章來介紹一個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 Brow 15.0
iOS Safari 6.0
iOS Safari 6.0Android Brow 2.15.效果圖檢視：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屬性所介紹的一個實例，大家可以自己動手編譯試試，看看效果。 ###以上是CSS3中的pointer-events屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn