2013年9月24日火曜日

【IE11】DIV要素の下に重なっている、ボタンやアンカーを押せるようにするには?[pointer-events: none;]

IE11から適用されているCSS「pointer-events」が解決の一つの方法となるかもしれません。
これは指定されたの要素に対するマウスイベントの制御を行います。
この設定値をnoneと指定された際、自身のマウスイベントとしては通知されず、
そのまま下の要素にイベントを渡します。

<div style="pointer-events: none; position: absolute; width: 200; height: 100;"> </div> <input type="checkbox" />
<参考になったサイト>
重なった要素上でのイベントで下層要素を特定したい
http://okwave.jp/qa/q6316242.html
CSS3:pointer-eventsのブラウザ対応表(2013.9時点)
http://caniuse.com/pointer-events
以下にはこのCSSに対する警告が出されていますのでご一読ください。(英文)
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
直訳参考
警告:非SVG要素のCSSにポインタイベントの使用は実験的なものです。多くの未解決の問題が原因でCSS3のUIドラフト仕様ですが、一部されていた機能が、CSS4に延期されています。