ユーザーのマウス操作に応じてスタイルを動的に変更する方法として、JSのaddEventListnerメソッドを用い、ユーザー操作のイベントに応じて関数を呼び出し、スタイルCSSを動的に書き換える方法がありますが、addEventListnerメソッドはどうやらIE11では使えません。
開発者ツールで確認すると「構文エラー」が起きており、意図したとおりには動作しない事が分かります。
例えば、背景色が赤のコンテナーにmouseoverした場合に背景色を青に書き換えるような場面。以下、IE11でのNGサンプル。
NGサンプル
/* 上記コード */
<div id="test" style="width:150px; height:150px; border:solid 0.5px black;
background:hsla(0,100%,50%,1); color:white">NGサンプル</div>
<script>
document.querySelector('#test').addEventListener('mouseover',()=>{
const test=document.querySelector('#test');
test.style.background='hsla(240,100%,50%,1)';
test.style.transition='1.5s';
});
</script>
上記サンプル事例は、現行のエッジやクローム、オペラ、ファイヤーフォックスといったブラウザでは意図通りに動作いたしますが、IE11では構文エラーとなり動作しないんです。
そこで色々と試した結果、イベントオブジェクトを使えばIE11でも意図したとおりの動作をすることがわかりました。以下、IE11でも動作するサンプル。
改修後サンプル
/* 上記コード */
<div id="test2" style="width:150px; height:150px; border:solid 0.5px black;
background:hsla(0,100%,50%,1); color:white;" onmouseover="tmp();">改修後サンプル</div>
<script>
function tmp(){
const test2=document.querySelector('#test2');
test2.style.background='hsla(240,100%,50%,1)';
test2.style.transition='1.5s';
};
</script>
これでIE11でも対応可能です。