IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

IE で、透明なオーバーレイ要素に mouseover 、 mouseout イベントが発生しない

JavaScript

はじめに

IE では透明なオーバーレイ要素のマウスイベントのハンドリングがおかしい

たとえば

以下のページで表示されている要素には透明な div がオーバーレイされています。そして、その要素に mouseover が発生すると背景を青くしています。
試してみてください。 IE では、想定の挙動ができていないことが分かると思います。
http://amachang.sakura.ne.jp/misc/mouseoutover/
ソースコードは以下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            p { border: solid 10px gray; background: pink; padding:
                10px; margin: 10px; line-height: 2;
                }
            #a { position: absolute; z-index: 1;
                top: 0; left: 0; right: 0; bottom: 0; }
        </style>
    </head>
    <body>
        <div style="position: absolute" id="back">
            <div id="a"></div>
            <p>aaaaaaaaaaa</p>
            <p>a a <br/>a a a a a a a a a a a a a a a a a a a a </p>
        </div>
        <script>
            var $ = function(id) { return document.getElementById(id) }
            var backEl = $('back'), el = $('a');
            el.onmouseover = function() {
                backEl.style.background='lightblue';
            };
            el.onmouseout = function() {
                backEl.style.background='transparent';
            };
        </script>
    </body>
</html>

IE の挙動

どうやら、 IE 7 では、透明（background: transparent）な要素にはマウスイベントが発生しないようです。
そして、 IE 8 では、透明な要素にもマウスイベントが発生するのですが、 z-index 的に下にボーダーや行ボックスが存在すると、そちらにイベントを発火するようです。

対策

対策としては、以下のように background: transparent じゃない透明（background: white; filter: alpha(opacity=0)）な要素を作ってあげるのがいいと思います。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            p { border: solid 10px gray; background: pink; padding:
                10px; margin: 10px; line-height: 2;
                }
            #a { position: absolute; z-index: 1;
                top: 0; left: 0; right: 0; bottom: 0; }
            /* 以下の行を追加 */
            #a { background: white; filter: alpha(opacity=0); opacity: 0 }
        </style>
    </head>
    <body>
        <div style="position: absolute" id="back">
            <div id="a"></div>
            <p>aaaaaaaaaaa</p>
            <p>a a <br/>a a a a a a a a a a a a a a a a a a a a </p>
        </div>
        <script>
            var $ = function(id) { return document.getElementById(id) }
            var backEl = $('back'), el = $('a');
            el.onmouseover = function() {
                backEl.style.background='lightblue';
            };
            el.onmouseout = function() {
                backEl.style.background='transparent';
            };
        </script>
    </body>
</html>