IE11でCSSにhoverの擬似クラスのセレクタを記述した場合にデフォルトのhoverスタイルが適応されない。

Question

タイトルのとおりです。
IE11でボタンコントロールや、テキストボックスを配置すると、
マウスオーバーで背景に青っぽいスタイルが適用されると思います。

ですが、下記のようによみこむCSSのセレクタにhoverの擬似クラスを設定したものが
存在する場合、デフォルトのスタイルが適応されませんでした。

どう考えても関係があるとは思えず、似たようなエラーの報告も見当たらないようなので？
私の環境の問題かもしれませんが。。。

もし、似たような状況に陥ったことがあるかた、いらっしゃいましたら対策など、アドバイスいただけませんでしょうか？

<button>
button
</button>
<input type="button" value="button">
<input type="submit" value="submit">
<input type="checkbox">
<input type="radio">
<input type="text">

.hoge:hover {}
/* .hoge{} だけならなぜかうまくいきます。*/
/* また、.hoge:avtive{} 等でも大丈夫です、*/

[https://jsfiddle.net/3dv125vr/]

Answer 1

確かに再現しますね。
でも、これはIE独自の実装で、Chromeなどではボタンの枠線が濃くなるだけです。

もし「今までIE独自実装で済ませてきたのに、スタイルを付けたら消えてしまった」ということがお困りなら、
同じ振る舞いになるようにCSSで指定するしかないですね。

Comments

[a-takahashi]

ありがとうございます。
やっぱりIEのバグなんでしょうかね。CSSで指定することにします。
これのことなんでしょうかね。。。
https://connect.microsoft.com/IE/feedback/details/1231373/strange-behavior-with-hover-pseudo-class-on-elements-other-than-links