Question

我有两个与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;
}

我做错了吗？为什么不工作？

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

Answer 1

我认为Gareth是对的。然而，可能有一种风格可以覆盖这一种。

尝试添加!important：

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

Answer 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;
}

Answer 3

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

a:-webkit-any-link {
    text-decoration: none;
    cursor: auto;
}

文本修饰：none不适用于Rails链接

3 个答案: