ホームページ > 記事 > ウェブフロントエンド > CSS3 の pointer-events プロパティの概要
CSS3 の pointer-events プロパティの概要
- 青灯夜游オリジナル
- 2018-09-25 18:02:372466ブラウズ
この章では、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>
$('#btnP').click(function(){
$('.top').css('pointer-events', 'none')
})
</script>
</html>上記は、CSS3 ポインター イベントの例です。属性の導入 、自分でコンパイルして効果を確認してください。
以上がCSS3 の pointer-events プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。