CSS pointer-events プロパティ
例
要素がマウスイベントに反応するかどうかを設定します：
試してみる »
定義と使用法
pointer-events プロパティは、要素がマウスイベントに反応するかどうかを設定するために使用されます。
| デフォルト値: | none |
|---|---|
| デフォルト値: | auto |
| 継承: | 无 |
| アニメーション: | no。 読み取りanimatable |
| バージョン: | CSS3 |
| JavaScript 構文: | object.style.all="initial" 試してみる |
ブラウザサポート
表内の数値は、そのプロパティをサポートするブラウザの最小バージョン番号を示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
CSS 構文
pointer-events: auto|none;
プロパティ値
| プロパティ値 | 説明 |
|---|---|
| auto | デフォルト値。このプロパティを設定すると、リンクを通常どおりクリックしてアクセスできます。 |
| none | 要素はマウスイベントに反応できません |
| initial | このプロパティをそのデフォルト値に設定します。詳細を見るinitial |
| inherit | 親要素からこのプロパティを継承します。詳細を見るinherit |
例
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG にのみ適用 */
pointer-events: visibleFill; /* SVG にのみ適用 */
pointer-events: visibleStroke; /* SVG にのみ適用 */
pointer-events: visible; /* SVG にのみ適用 */
pointer-events: painted; /* SVG にのみ適用 */
pointer-events: fill; /* SVG にのみ適用 */
pointer-events: stroke; /* SVG にのみ適用 */
pointer-events: all; /* SVG にのみ適用 */
/* グローバル値 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
visiblePainted
SVG にのみ適用されます。要素は以下の場合にのみマウスイベントのターゲットになります：
- visibility プロパティの値が visible であり、マウスポインタが要素の内側にあり、かつ fill プロパティに none 以外の値が指定されている場合
- visibility プロパティの値が visible であり、マウスポインタが要素の境界上にあり、かつ stroke プロパティに none 以外の値が指定されている場合
visibleFill
SVG にのみ適用されます。要素の visibility プロパティの値が visible であり、かつマウスポインタが要素の内側にある場合にのみ、要素はマウスイベントのターゲットになります。fill プロパティの値はイベント処理に影響しません。
visibleStroke
SVG にのみ適用されます。要素の visibility プロパティの値が visible であり、かつマウスポインタが要素の境界上にある場合にのみ、要素はマウスイベントのターゲットになります。stroke プロパティの値はイベント処理に影響しません。
visible
SVG にのみ適用されます。要素の visibility プロパティの値が visible であり、かつマウスポインタが要素の内側または境界上にある場合にのみ、要素はマウスイベントのターゲットになります。fill および stroke プロパティの値はイベント処理に影響しません。
painted
SVG にのみ適用されます。要素は以下の場合にのみマウスイベントのターゲットになります：
- マウスポインタが要素の内側にあり、かつ fill プロパティに none 以外の値が指定されている場合
- マウスポインタが要素の境界上にあり、かつ stroke プロパティに none 以外の値が指定されている場合
visibility プロパティの値はイベント処理に影響しません。
fill
SVG にのみ適用されます。マウスポインタが要素の内側にある場合にのみ、要素はマウスイベントのターゲットになります。fill および visibility プロパティの値はイベント処理に影響しません。
stroke
SVG にのみ適用されます。マウスポインタが要素の境界上にある場合にのみ、要素はマウスイベントのターゲットになります。stroke および visibility プロパティの値はイベント処理に影響しません。
all
SVG にのみ適用されます。マウスポインタが要素の内側または境界上にある場合にのみ、要素はマウスイベントのターゲットになります。fill、stroke、visibility プロパティの値はイベント処理に影響しません。
その他の拡張