なにがおきているか
以下のHTMLファイルをIE11で開き、ボタンを押下する。
hover.html
<html>
<head>
<style>
.hoge:hover {
}
</style>
</head>
<body>
<input type="button" value="click">
<button>click</button>
</body>
</html>
すると、以下のように他の場所をクリックするまで色が戻らない。
発生条件
- IEのドキュメントモードが8以上
- Windows 10 / Windows7でAeroテーマあるいはWindows7ベーシックテーマ利用時
再現した環境
- Windows 10 Pro 1709 / IE 11.492.16299.0 (更新バージョン: 11.0.70)
- Windows 10 Pro 1709 / IE 11.371.16299.0 (更新バージョン: 11.0.60)
- Windows 7 Professional SP1 / IE 11.0.9600.18638 (更新バージョン: 11.0.41)
- Windows 7 Enterprise SP1 / IE 11.0.9600.18860 (更新バージョン: 11.0.49)
- Windows Server 2012 R2 / IE 11.0.9600.19180 (更新バージョン: 11.0.95)
- Windows 8.1 Enterprise / IE 11.0.9600.18894 (更新バージョン: 11.0.50)
- Windows 10 Enterprise 1803 / IE 11.1.17134.0 (更新バージョン: 11.0.47)
- Windows 10 Pro 1809 / IE 11.194.17763.0 (更新バージョン: 11.0.100)
暫定対処
以下のように関係のないプロパティで:hoverを設定しておけばとりあえずは回避可能。
あるいは、:hoverの定義自体をすべて削除すれば回避可能。
hover_fixed.html
<html>
<head>
<style>
input:hover, button:hover {
hoge: none;
}
</style>
</head>
<body>
<input type="button" value="click">
<button>click</button>
</body>
</html>
いつから発生しているのか
不明。さすがに昔からこんな現象であれば気づいていると思うが…。
ネットでの類似情報はまだ見つけられていません。
何か情報をお持ちの方がいれば、情報共有頂けると幸いです。
とりあえず、Microsoftフォーラムには投稿してみました。(これが正解なのかよくわかりませんが…)
もしかして、Windows10 1809だと発生しない?(未確認)
→ 1809でもダメでした。