

要素を位置指定して他の要素の上に重ねて表示すると、背景を設定しなくてもマウスイベントは重ねた要素の方に取られてしまいます。

例えば次のコードではborderを設定したdivの上からではボタンが押せません。

[code]

    div {
      position: absolute;
      top: 0;
      width: 50px;
      height: 50px;
      border: 2px solid blue;
    }
[/code]

[code]

    <button onclick="alert('hello!')">Click me!</button>
    <div></div>
[/code]

背景の部分だけ、あるいは重ねた要素全体でも、まるで要素が存在しないかのようにマウスイベントを透過させることはできないでしょうか？


CC BY-SA 3.0
2017-03-20T13:04:30.960
33427
2017-03-20T13:04:30.960
8000
question
html css
特定の要素をマウスイベントが透過するようにしたい


CSSで `pointer-events: none` を指定します。

これで要素はマウスイベントを受け取らなくなり（つまり `Event.target` に現れない）、代わりにその下にある要素等へ通り抜けていきます。

[IE10以下で使えない](http://caniuse.com/#feat=pointer-events)ぐらいで、大半のブラウザで使うことができます。

[code]

    div {
      position: absolute;
      top: 0;
      width: 50px;
      height: 50px;
      border: 2px solid blue;
      pointer-events: none; /* 追加 */
    }
[/code]

[code]

    <button onclick="alert('hello!')">Click me!</button>
    <div></div>
[/code]

## 参考

  * [Pass mouse events through absolutely-positioned element - Stack Overflow](https://stackoverflow.com/q/1009753/2818869)
  * [pointer-events - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events)


CC BY-SA 3.0
2017-03-20T13:04:30.960
33428
2017-03-20T13:04:30.960
2017-05-23T12:38:55.307
-1
8000
33427
answer