CSS3 の pointer-events プロパティの概要-CSSチュートリアル-php.cn

CSS3 の pointer-events プロパティの概要

青灯夜游

リリース： 2018-09-25 18:02:37

オリジナル

2535 人が閲覧しました

この章では、CSS3 の非常に実用的な属性、CSS3 pointer-events 属性を紹介します。困っている友人は参考にしていただければ幸いです。

最近、JavaScript に関連する属性である pointer-events という CSS 属性を発見しました。値が none に設定されている場合、これは文字通りポインターイベントとして変換されます。
ユーザーのクリックアクションによる効果の生成を防止する
デフォルトのマウスポインターの表示を防止する
Css でのホバーおよびアクティブ状態の変化がイベントをトリガーしないようにする
JavaScript のクリックアクションによってトリガーされるイベントを防止する
1 CSS でできることがたくさんあるのはすごいと思いませんか。互換性の状況を見てみましょう。
IE 11
Firefox 3.6+
Chrome 4.0
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android ブラウザ 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>

ログイン後にコピー

上記は、CSS3 ポインターイベントの例です。属性の導入、自分でコンパイルして効果を確認してください。

以上がCSS3 の pointer-events プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。