CSS3中的pointer-events属性介绍

青灯夜游
Lepaskan: 2018-09-25 18:02:37
asal
2494 orang telah melayarinya

本章给大家介绍一个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>
    $(&#39;#btnP&#39;).click(function(){
        $(&#39;.top&#39;).css(&#39;pointer-events&#39;, &#39;none&#39;)
    })
</script>
</html>
Salin selepas log masuk

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

Atas ialah kandungan terperinci CSS3中的pointer-events属性介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!