WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス

pointer-events「マウスイベントのターゲット制御」

マウスイベント(hover , click など)の発生を制御します。

HTMLの要素に適用できる設定値は、auto , none のみです。
それ以外は、<svg>の要素に適用できます。

CSS Ver.適用要素継承
3.0全要素する
広告

pointer-events の指定方法

構文

pointer-events : auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all;

プロパティ/設定値意味
pointer-events: auto; 通常の動作
pointer-events: none; マウスイベントは発生しない
但し、子要素にpointer-events:autoが設定された場合、
子要素のマウスイベントは発生する
pointer-events: visible; <svg>に指定可能
visibilityがvisibleの時、図形の描画範囲全体
pointer-events: visibleFill; <svg>に指定可能
visibilityがvisibleの時、塗りつぶしの部分
pointer-events: visibleStroke; <svg>に指定可能
visibilityがvisibleの時、線の部分
pointer-events: visiblePainted; <svg>に指定可能
visibilityがvisibleの時、fill:none、stroke:none以外の部分
pointer-events: fill; <svg>に指定可能
塗りつぶしの部分
pointer-events: stroke; <svg>に指定可能
線の部分
pointer-events: painted; <svg>に指定可能
fill:none、stroke:none以外の部分
pointer-events: all; <svg>に指定可能
図形の描画範囲全体
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

pointer-events のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
}
div.cssTitle {
  width         : 290px;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
  border        : 2px solid #6495ed;
  padding       : 10px;
}
.css-border {
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
.css-none{
  pointer-events : none;
  display: inline-block
}
#chk:checked ~ a {
  pointer-events : none;
  display: inline-block
}
<!-- html -->
<div class="common">
  <div class="cssTitle">pointer-events : none;<br>
  リンクを無効にする</div>
  <div class="css-border">
	<a href="../" class="css-none">CSSプロパティ一覧へ</a>
  </div>
  <div class="cssTitle">pointer-events : none;<br>
  チェックした時、リンクを無効にする</div>
  <div class="css-border">
	<input type="checkbox" id="chk"><label for="chk">リンクを無効</label>
	<a href="../">CSSプロパティ一覧へ</a>
  </div>
</div>
pointer-events : none;
リンクを無効にする
pointer-events : none;
チェックした時、リンクを無効にする
CSSプロパティ一覧へ

※ IEは、インライン要素では動作しないため、display: inline-block を指定しています。


<svg>のpointer-events のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
}
div.cssTitle {
  width         : 290px;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
  border        : 2px solid #6495ed;
  padding       : 10px;
}
.css-border {
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
<!-- html -->
<div class="common">
  <div class="cssTitle">マウスオーバーでイベント発生を確認</div>
  <div class="css-border">
	<svg width="300" height="450" viewBox="0 55 200 200">
	<style>
	  #svg1 rect:hover{fill:pink;}
	</style>
	<g id="svg1" fill="yellow">
	  <rect x="10" y="10" width="180" height="40" stroke="blue" stroke-width="10"
	  pointer-events="none"/>
	  <rect x="10" y="70" width="180" height="40" stroke="blue" stroke-width="10"
	  pointer-events="fill"/>
	  <rect x="10" y="130" width="180" height="40" stroke="blue" stroke-width="10"
	  pointer-events="stroke"/>
	  <rect x="10" y="190" width="180" height="50" stroke="blue" stroke-width="10"
	  pointer-events="painted"/>
	  <rect x="10" y="260" width="180" height="40" stroke="blue" stroke-width="10"
	  pointer-events="all"/>
	</g>
	<text font-size="8" x="20" y="30">pointer-events:"none"</text>
	<text font-size="8" x="20" y="40">◆イベント発生なし</text>
	<text font-size="8" x="20" y="90">pointer-events:"fill"</text>
	<text font-size="8" x="20" y="100">◆塗り潰し上でイベント発生</text>
	<text font-size="8" x="20" y="150">pointer-events:"stroke"</text>
	<text font-size="8" x="20" y="160">◆枠線上でイベント発生</text>
	<text font-size="8" x="20" y="210">pointer-events:"painted"</text>
	<text font-size="8" x="20" y="220">◆fill:none、stroke:none以外で</text>
	<text font-size="8" x="20" y="230"> イベント発生</text>
	<text font-size="8" x="20" y="280">pointer-events:"all"</text>
	<text font-size="8" x="20" y="290">◆図形上全てでイベント発生</text>
	<svg>
  </div>
</div>
マウスオーバーでイベント発生を確認
pointer-events:"none" ◆イベント発生なし pointer-events:"fill" ◆塗り潰し上でイベント発生 pointer-events:"stroke" ◆枠線上でイベント発生 pointer-events:"painted" ◆fill:none、stroke:none以外で  イベント発生 pointer-events:"all" ◆図形上全てでイベント発生

<svg>のpointer-events のサンプル(塗り潰しなし(fill="none")でもクリック可能とする)


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
}
div.cssTitle {
  width         : 290px;
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
  border        : 2px solid #6495ed;
  padding       : 10px;
}
.css-border {
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
<!-- html -->
<div class="common">
  <div class="cssTitle">pointer-events : fill;</div>
  <div class="css-border">
	<svg width="300" height="300" viewBox="0 0 200 200">
	<style>
	  #svg2 rect:hover{fill:pink;}
	</style>
	<a id="svg2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://web-designer.cman.jp/css_ref/abc_list/">
	  <rect x="10" y="10" width="180" height="40" fill="yellow"/>
	  <rect x="10" y="60" width="180" height="40" fill="none"/>
	  <rect x="10" y="110" width="180" height="40" fill="none" pointer-events="fill"/>
	  <rect x="10" y="160" width="180" height="40" fill="none" pointer-events="fill"/>
	</a>
	<rect x="10" y="10" width="180" height="40" stroke="black" fill="none"/>
	<rect x="10" y="60" width="180" height="40" stroke="black" fill="none"/>
	<rect x="10" y="110" width="180" height="40" stroke="black" fill="none"/>
	<rect x="10" y="160" width="180" height="40" stroke="black" fill="none"/>
	<text font-size="8" x="20" y="20">pointer-events 指定なし</text>
	<text font-size="8" x="20" y="30">fill="yellow"(塗り潰し指定)</text>
	<text font-size="8" x="20" y="45">◆クリックできる</text>
	<text font-size="8" x="20" y="75">pointer-events 指定なし</text>
	<text font-size="8" x="20" y="90">◆クリックできない</text>
	<text font-size="8" x="20" y="125">pointer-events:"fill"</text>
	<text font-size="8" x="20" y="140">◆クリックできる(text上は不可)</text>
	<text font-size="8" x="20" y="170" pointer-events="none">pointer-events:"fill"</text>
	<text font-size="8" x="20" y="180" pointer-events="none">textにpointer-events:"none"指定</text>
	<text font-size="8" x="20" y="195" pointer-events="none">◆クリックできる(text上も可能)</text>
	<svg>
  </div>
</div>
pointer-events:"fill"
pointer-events 指定なし fill="yellow"(塗り潰し指定) ◆クリックできる pointer-events 指定なし ◆クリックできない pointer-events:"fill" ◆クリックできる(text上は不可) pointer-events:"fill" textにpointer-events:"none"指定 ◆クリックできる(text上も可能)
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン