css - 仅从 anchor 元素子元素中删除下划线

Question

当 a 标签包含子元素时，比如 i 标签，它仍然在悬停时对其应用下划线，我想知道如何删除下划线当有人将鼠标悬停在 a 标签上时，仅来自 i 标签。

我正在使用的 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;
}

这里用fiddle来解释一下: http://jsfiddle.net/kkz66x2q/

我只是希望当您将鼠标悬停在链接上时，下划线只在 i 元素上消失。

Answer 1

尝试遵循 css，

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

Demo