ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS の pointer-events プロパティを使用してマウス侵入効果を実現するためのヒントを共有する

CSS の pointer-events プロパティを使用してマウス侵入効果を実現するためのヒントを共有する

高洛峰
リリース: 2017-03-08 14:18:16
オリジナル
2012 人が閲覧しました

最新のブラウザーにおける CSS と JavaScript の責任範囲はますます曖昧になってきています。たとえば、CSS の -webkit-touch-callout 属性を使用すると、iOS でユーザーがバブル ボックスをクリックしたときにバブル ボックスがポップアップするのを防ぐことができます。この記事で説明するポインター イベントのスタイルは、次のようなことができます:

1. ユーザーのクリック操作による効果の生成を防止します
2. デフォルトのマウス ポインターの表示を防止します
3. CSS の状態変更でイベントがトリガーされる
4. JavaScript のクリック アクションによってトリガーされるイベントを防止する
1 つの CSS プロパティで非常に多くのことができます。

pointer-events:none を使用すると、クリックはキャプチャされず、イベントがその下に浸透するだけになることを意味します。コードは次のとおりです。

<style>   
 .overlay {   
  pointer-events: none;   
 }   
</style>   

<p id="overlay" class="overlay"></p>
ログイン後にコピー

値が auto の場合、効果は pointer-events 属性が定義されていない場合と同じであり、マウスは現在のレイヤーを通過しません。 SVG では、この値はvisiblePaintedと同じ効果があります。
このポインター イベント属性には多くの使用可能な属性値がありますが、それらのほとんどは SVG 用です: auto、none、visiblePainted*、visibleFill*、visibleStroke*、visible*、Painted*、fill*、stroking*、all*、inherit 。

ポインターイベントについて注意すべき点:
1. 子要素は、親要素のマウスイベントブロック制限を解除するためにポインターイベントを宣言できます。
2. 要素にクリック イベント リスナーを設定した後、ポインター イベント スタイル宣言を削除するか、その値を auto に変更すると、リスナーは再び有効になります。基本的に、リスナーはポインターイベント設定を尊重します。


以上がCSS の pointer-events プロパティを使用してマウス侵入効果を実現するためのヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート