IE10で:hover時に擬似要素のスタイルが変更されない場合の解決策

装飾的な要素やアイコンなど、HTMLとして特別な意味を持たないパーツをコーディングする際に、空の <div> や <span> を追加するのではなく擬似要素を利用することも多いと思います。

擬似要素に対してもCSSによるスタイリングやアニメーションが設定可能ですが、IE10において:hover擬似クラスと複合させた際の挙動が他のブラウザと異なる場合があったので、解決策をまとめておきます。

IE10では:hover時に::before要素のスタイルが変更されない例

この例では、div.parent を:hoverした際に::before擬似要素の背景色を黒→赤に変更しようとしています。
しかしIE10ではスタイルの変更が反映されず、:hover時にも背景色は黒のままとなります。

See the Pen qiita_e5238c1e6aa59bf8050c_01 by Sho Uchida (@shouchida) on CodePen.

html

<div class="parent">コンテンツ</div>

css

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover::before {
  background: red;
}

解決策

検証したところ、いくつかの解決策が見つかりました。

解決策1　「擬似要素の親要素」を<a>要素に変更する

冒頭の例で <div> 要素にしていた親要素を <a> 要素に変更すると、:hoverのスタイルが反映されるようになります。

See the Pen qiita_e5238c1e6aa59bf8050c_02 by Sho Uchida (@shouchida) on CodePen.

html

<a href="#" class="parent">コンテンツ</a>

css

.parent {
  display: block;
}

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover::before {
  background: red;
}

解決策2　「擬似要素の親要素」のさらに親要素に:hoverを設定する

何らかの都合で <a> 要素に変更できない場合は、一つ外側の要素に対して:hoverを設定するとIE10でもスタイル変更が反映されます。

See the Pen qiita_e5238c1e6aa59bf8050c_03 by Sho Uchida (@shouchida) on CodePen.

html

<div class="hover-target">
<div class="parent">コンテンツ</div>
</div>

css

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.hover-target:hover .parent::before {
  background: red;
}

解決策3　「擬似要素の親要素」にあらかじめ :hover {} を設定しておく

かなり謎な挙動ですが、CSS内にあらかじめ .parent:hover {} を記述しておくと、IE10でもスタイル変更が反映されるようになりました。
:hoverアクションがあることを事前にブラウザに伝えておくといったイメージでしょうか…

CSS側の可読性や保守性に問題が生じやすいため、HTML構造の変更が難しい場合の最終手段かと思います。

See the Pen qiita_e5238c1e6aa59bf8050c_04 by Sho Uchida (@shouchida) on CodePen.

html

<div class="parent">コンテンツ</div>

css

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover {
  /* プロパティ指定は空でもよい */
}

.parent:hover::before {
  background: red;
}

補足

IE10は2016年1月13日（日本時間）をもって実質的にサポートが終了しています。
http://qiita.com/sawadays0118/items/41bab56358742fe2a646