仅从锚元素子项删除下划线

问题描述

当a标记包含子元素(如i标记)时，它仍会在悬停时对其应用下划线，并且我想知道当有人将鼠标悬停时如何从i标记中删除下划线在a标签上.

When an a tag contains child elements, like an i tag, it's still applying the underline to it on hover, and I'm wondering how to remove the underline from just the i tag when someone hovers over the a tag.

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

Here is a fiddle to explain:http://jsfiddle.net/kkz66x2q/

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

I simply would like the underline to be GONE only on the i element when you hover over the link.

推荐答案

尝试跟随CSS，

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

演示

这篇关于仅从锚元素子项删除下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！