1

我有 2 个与 Glyphicons 的链接，并且想要 Text-decoration: none; 但由于某种原因它不会消失，我总是得到一条悬停线。

链接是：

<p class="user-profile-social-links pull-right">
  <% if @user.facebooklink.present? %>
      <%= link_to @user.facebooklink, title: "Facebook", :target => '_blank' do %>
          <i class="icon-facebook-sign"></i>
      <% end %>
  <% end %>

  <% if @user.twitterlink.present? %>
      <%= link_to @user.twitterlink, title: "Twitter", :target => '_blank' do %>
          <i class="icon-twitter-sign"></i>
      <% end %>
  <% end %>
</p>

这个类有这个CSS：

.user-profile-social-links {
text-decoration: none;
display: block;
color: #777;
}

难道我做错了什么 ？为什么它不工作？

*编辑：* 这就是我仍然得到的 -> http://imgur.com/raC362u（放大一点以查看图标下方的行）

4

3 回答 3

5

我认为加雷斯是对的。然而，可能有一种样式会覆盖这个样式。

尝试添加!important：

.user-profile-social-links a {
    text-decoration: none !important;
    color: #777;
}
于 2013-07-15T18:37:43.400 回答
2

你在你的 , 元素上设置了这些样式p.user-profile-social-links，并且p元素已经没有文本装饰，所以这部分规则实际上什么都不做。

a您需要在您的内部元素上应用其中一些样式p：

.user-profile-social-links a {
    text-decoration: none;
    color: #777;
}

.user-profile-social-links {
    display: block;
}
于 2013-07-15T17:16:53.790 回答
1

链接具有默认的文本装饰，可以通过将其放在 application.css 的任何位置来更改：

a:-webkit-any-link {
    text-decoration: none;
    cursor: auto;
}
于 2016-10-15T09:34:54.350 回答