浸透DIV（ポインタイベント）

まず参照 pointer-events: auto：通常頻繁に、DIVのDIVが他から隠され、以下のように私たちは、あなたが、クリックの操作やホバーすることができないものです、

HTML：

<divのクラス = " ybox " > </ div> 
<divのクラス = " はgBox " > </ div>

CSS：

.ybox { 
  背景：RGBA（255、200、0。、8 ）。
  マージン：20ピクセル; 
  Z -index：3 。
} 
.gbox { 
  背景：RGBA（0、220、170、。8 ）。
  マージン： - 80px 40ピクセル20ピクセル。
  Z -index：2 。
} 
.gbox：ホバー{ 
  背景：RGBA（255、50、50、8 ）。
}

我々はyboxを高めるために、この時間がかかる場合は pointer-events: none;、あなたは下はgBox見つけるまで置くことができます！

いくつかの小さな導入を行うために、ここで他の属性については、によると、この説明で、我々は他の特性が説明されていることを知ることができます。

visiblePainted：
SVGにのみ適用されます。以下の要素は、マウスイベントの対象となるであろう：可視属性の値は、要素内に可視、およびマウスポインタであり、塗りつぶし属性なし以外の値を指定し、可視属性の値が表示され、要素の境界上にマウスポインタストローク属性は、none以外の値を指定します。
visibleFill：
のみSVGに適用されます。視認性は、素子特性にのみ表示され、内部要素は、要素がマウスイベントの対象となるであろうマウスポインタが、塗りつぶし属性の値は、イベント処理に影響を与えません。
visibleStroke：
のみSVGに適用されます。視認性は、素子特性にのみ表示され、境界要素は、要素がマウスイベントの対象となるマウスポインタが、プロパティの値は、ストロークイベント処理に影響を与えません。
表示：
のみSVGに適用されます。視認性は、素子特性にのみ表示され、そして内部または境界要素は、要素がマウスイベントの対象となるマウスポインタが、フィルとストローク属性の値は、イベント処理に影響を及ぼしません。
塗装：
SVGにのみ適用されます。要素内にマウスポインタ、および塗りつぶし属性は、none以外の値は、要素の境界上にマウスポインタを指定し、ストローク属性がnone以外の値を指定します。要素は次の目的でマウスイベントとなります。
visibilityプロパティの値はイベント処理に影響を与えません。
記入：
のみSVGに適用されます。要素内のマウスポインタが、要素がマウスイベントの対象となる場合にのみ、塗りつぶしや可視性の属性の値はイベント処理に影響を与えません。
ストローク：
のみSVGに適用されます。唯一の境界要素の上にマウスポインタが、要素がマウスイベントのターゲット、イベント処理に影響を与えませんストロークと可視性の属性の値になります。
すべて：
のみSVGに適用されます。マウスポインタが要素や境界要素内にある場合のみ、塗りつぶし、ストロークと可視性の属性の値はイベント処理に影響を与えていない、マウスイベントの対象となります。

あなたが境界線の色の上にマウスを制御したり、結果を記入するように設定されている変色、までの領域を埋めるために移動できるように、例えば、我々は、描かれたSVGの長方形で絵を持っています：

HTML：

<SVG幅= " 200 "高さ= " 140 " > 
  <RECT幅= " 100 "高さ= " 100 "を埋める= " ＃F00 "ストローク= " ＃000 "ストローク幅= " 10 " x = " 20 " Y = " 20 " ID = " テスト" > </ RECT> 
</ SVG>

CSS：

#test { 
  ポインタ - イベント：埋めます。
} 
#test：ホバー{ 
  埋める：＃09F。
}

これは、ストロークを変更するように設定されている場合になります。

彼らは知ってもらうの後にこれは、あなたがdiv要素をカバーし、物事の底に上をクリックすることができますので、あなたがああ多くのアプリケーションを作ることができ、実際には、ポインタ・イベントの使用です！本当にKanlaで使用するために待つことができません！

浸透DIV（ポインタイベント）

おすすめ