CSS3中的pointer-events屬性介紹-css教學-PHP中文網

CSS3中的pointer-events屬性介紹

青灯夜游

發布： 2018-09-25 18:02:37

原創

2535 人瀏覽過

本章來介紹一個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

Android Brow　2.15.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>
    $(&#39;#btnP&#39;).click(function(){
        $(&#39;.top&#39;).css(&#39;pointer-events&#39;, &#39;none&#39;)
    })
</script>
</html>

登入後複製

以上是CSS3 pointer-events屬性所介紹的一個實例，大家可以自己動手編譯試試，看看效果。 ###

以上是CSS3中的pointer-events屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！