html - a-tag 内でのさまざまなホバー動作。IE 8+ での問題

Question

Internet Explorer 8+ で次の問題が発生しました。他のすべてのブラウザで動作します。

aタグ内のiタグに下線のホバー効果を付けたくありません。IE 8+ は、i タグのホバー疑似クラスを無視します。HTMLコードは次のとおりです。

<a href="#"><i class="icon-print"></i>Print</a>

関連する CSS コードは次のとおりです。

a:hover {text-decoration: underline;}
a i:hover {text-decoration: none;}

score 3 · Accepted Answer

「印刷」をspan

<a href="#"><i class="icon-print"></i><span>Print</span></a>

そしてcssで

a {text-decoration:none;}
a:hover {text-decoration:none;}
a:hover > span { text-decoration:underline;}

score 0 · Accepted Answer

a-tagにはi-tagが含まれており、CSSコードにあなたが言うため、これは決して機能しません

a:hover {text-decoration: underline;}

a-tag 内のすべてに下線が引かれます ... 唯一の解決策は、i-tagを a- tag から分離することです

2 に答える 2