cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
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>に指定可能 図形の描画範囲全体 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
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>
※ 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>マウスオーバーでイベント発生を確認
<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"
広告