アンカー要素の子からのみ下線を削除する 質問する

アンカー要素の子からのみ下線を削除する 質問する

aタグにタグなどの子要素が含まれている場合、ホバーすると下線が適用されますが、誰かがタグにホバーしたときにタグiからのみ下線を削除する方法を知りたいです。ia

私が使用している CSS:

a{
    display:block;
    text-decoration:none;
}
a i{
  color:#888;
  margin-left:5px;
}
a:hover{
    text-decoration:underline;
}
a:hover i{
    text-decoration:none !important;
}

以下に説明を載せておきます:http://jsfiddle.net/kkz66x2q/

iリンクの上にマウスを置いたときに、要素の下線が消えるようにしたいだけです。

ベストアンサー1

次のCSSを試してください。

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

デモ

おすすめ記事