12

我有以下标记：

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback
  <i class="icon-comment"></i>
</a>

悬停时，我希望文本带有下划线，而不是字体真棒图标。我知道您可以在图标上执行“text-decoration:none”（有效），但是当您将鼠标悬停在文本部分时，它仍会为图标添加下划线。有任何想法吗？

http://jsfiddle.net/ZZEQd/

4

7 回答 7

18

我发现了一种不需要额外跨度标签的方法，它适用于我尝试过的所有浏览器（FF/Chrome/Safari/Opera）...除了IE8（我还没有在 IE 9 中测试过）或 10 个）。

只需将图标声明为 display:inline-block，悬停时不再有下划线。

示例：http: //jsfiddle.net/J432G/

HTML：

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback<i class="icon-comment"></i>
</a>

CSS：

a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
i:after{
  content: '{icon}';
  display: inline-block;
  padding-left: 1em;
}
于 2014-02-17T21:10:21.340 回答
6

...但是当您将鼠标悬停在文本部分时，它仍会为图标添加下划线。有任何想法吗？

要使其正常工作，您需要在单独的元素中包含链接文本（span理想情况下是 a ）：

<a href="#">
    <span>Feedback</span>
    <i class="icon-comment"></i>
</a>

现在您可以text-decoration从链接中完全删除 并将其分配给span（悬停时）：

a {
    text-decoration:none;
}

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

JSFiddle 演示。

于 2013-10-11T20:14:51.023 回答
2

可靠地做到这一点的唯一方法是将 text-decoration:none 分配给第一个父元素，即初始 a 标记。

于 2014-10-02T10:58:14.523 回答
2

如果您无法添加 span 元素（假设您只有 CSS 访问权限），它应该适用float:left or right于您的图标元素。

请参阅：CSS 链接的图像加下划线（“a”显示设置为阻止）

于 2015-04-29T07:39:25.137 回答
1

有人刚刚回复但删除了他们的回复。解决方案是：

#utilitynav a i {text-decoration:none;}

谢谢神秘人！

于 2013-10-11T20:19:01.857 回答
0

http://jsfiddle.net/ZZEQd/2/

只需在 HTML 中添加一个 span 标签，就可以了。

HTML：

    <a href="#" title="Feedback" id="feedbacktogglenav">
       <span class="linkHover">Feedback</span>
       <i class="icon-comment"></i>
    </a>

CSS

a {
    text-decoration:none;
}
.linkHover:hover{
    text-decoration: underline;
}
#utilitynav .icon-comment {
    font-size: 12px;
    margin-left: 3px;
    position: absolute;
    top: 2px;
}
#utilitynav .icon-comment:hover {
    text-decoration:none;
}
#utilitynav #feedbacktogglenav {
    margin-right: 12px;
}

我在您的跨度中添加了一个类，因为它不会影响未来的跨度标签

于 2013-10-11T20:23:33.540 回答
0

如果你有不能使用:beforeor的情况:after（例如，具体图标是由内容设置的，而不是由全局样式设置的），并且你也不想进入并放置<span>链接文本无处不在...另一种选择是将填充放在链接上，并将图标绝对定位在填充上。

HTML

    <a href="#">Feedback <i class="icon-comment fas fa-link"></i></a>

CSS

    a {
      position: relative;
      text-decoration:none;
      padding-left: 20px;
    }

    a:hover {
        text-decoration:underline;
    }

    a i {
      position: absolute;
      left: 0;
    }

JSFiddle：http: //jsfiddle.net/w6bL5m8k/1/

我敢肯定，在各种特殊情况下，这可能都行不通……但是对于简单的情况，应该没问题。

于 2019-06-18T22:10:47.420 回答