CSS辞典 pointer-eventsプロパティの解説

ポインターイベントの対象になる場合の条件を指定する「pointer-eventsプロパティ」の使用方法を記載

CSS3／2.1

対応ブラウザ
概要・使用方法
- 指定できる値（条件）
サンプルコード
- 実行結果

対応ブラウザ

初期値	auto
適用される要素	すべての要素、SVGにおけるコンテナー要素、グラフィック要素及びuse要素
モジュール	Scalable Vector Graphics( SVG )2及びScalable Vector Graphics( SVG )1.1( Second Edition )
継承	あり

概要・使用方法

{ pointer-events:条件;}

「pointer-eventsプロパティ」は、特定のグラフィック要素がポインターイベントの対象になる場合お条件を設定します。auto、bounding-bpx、none以外の値はSVGに対してのみ有効です。通常のHTML要素に対して指定した場合、autoとして解釈されます。

指定できる値（条件）

auto	デフォルトの動作です。visiblePaintedと同様です。
bounding-box	ポインターが要素の境界ボックス（バウンディングボックス）上にある場合、要素はポインターイベントのターゲット要素になります。
visiblePainted	要素のvisibilityプロパティにvisibleが設定されていて、かつポインターが要素の塗り（fill）領域上にあり、fillプロパティにnone以外の値が指定されている場合、または要素の境界線（stroke）上にあり、strokeプロパティにnone以外の値が設定されている場合、要素はポインターイベントのターゲット要素になります。
visibleFill	要素のvisibilityプロパティにvisibleが設定され、ポインターが要素の塗り（fill）領域上にある場合、要素はポインターイベントのターゲット要素になります。 fillプロパティの値はイベント処理に影響しません。
visibleStroke	要素のvisibilityプロパティにvisibleが設定されている場合及びポインターが要素の境界線（stroke）上にある場合、要素はポインターイベントのターゲット要素になります。 strokeプロパティの値はイベント処理に影響しません。
visible	要素のvisibilityプロパティにvisibleが設定され、ポインターが要素の塗り（fill）領域上、または境界線（stroke）上にある場合、要素はポインターイベントのターゲット要素になります。 fill、及びstrokeプロパティの値はイベント処理に影響しません。
painted	ポインターが要素の塗り（fill）領域上にあり、fillプロパティにnone以外の値が指定されている場合、または要素の境界線（stroke)上にあり、 strokeプロパティにnone以外の値が設定されている場合、要素はポインターイベントのターゲット要素になります。 visibilityプロパティの値はイベント処理に影響しません。
fill	ポインターが要素の塗り（fill）領域上にある場合、要素はポインターイベントのターゲット要素になります。 fill、及びvisibilityプロパティの値はイベント処理に影響しません。
stroke	ポインターが要素の境界線（stroke）上にある場合、要素はポインターイベントのターゲット要素になります。 stroke、及びvisibilityプロパティの値はイベント処理に影響しません。
`all`	ポインターが要素の塗り（fill）領域上、または境界線（stroke）上にある場合、要素はポインターイベントのターゲット要素になります。 fill、stroke、visibilityプロパティの値はイベント処理に影響しません。
none	要素はポインターイベントを受け取りません。

サンプルコード

すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>pointer-eventsプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>  
          .a-none {
                pointer-events: none;
          }
    </style>
  </head>
  <body>
      <div>
          <div>
              <a class="a-none" href=""><img class="imgbox objectfit-contain" src="https://kcfran.com/sample/359600_s.jpg"></a>
          </div>
      </div>
  </body>
</html>

実行結果

カテゴリー:CSS辞典WEBコンテンツ