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

Question

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

我正在使用的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当您将鼠标悬停在链接上时,我只希望下划线仅在元素上为GONE .

Answer 1

试试下面的css,

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

演示