在不改变文本颜色的情况下链接文本到蓝色

Question

我正在使用haml来显示用户的姓名和昵称（以单行格式），如下所示

//haml code
%div.name
  <%= user.name %> /
  %a.nickname{:href => '#!/<%= user.nickname %>'} <%= user.nickname %>

网页上的样子

如何在网络上点击整行，同时保留文字的颜色？ （即“某些用户名”文本可以像“昵称”一样链接，但保留其颜色为灰色）

Answer 1

这有点老了，发布的代码看起来有点奇怪，但是我只想发布一个Haml片段，并且相对于我的片段，无论是否使用rails helper，都可以回答它。

.name
  = link_to user.name, "#!/#{user.name}", :class => 'username' 
  /
  = link_to user.nickname, "#!/#{user.nickname}", :class => 'nickname'

或没有

.name
  %a.username{:href => "#!/#{user.name}"}
    = user.name
  /
  %a.nickname{:href => "#!/#{user.nickname}"}
    = user.nickname

如果你正在使用Sass包含这些或这些规则的某些子集来关闭可扩展的下划线，也可以用你用于常规文本的任何颜色替换＃999。如果您希望每种行为都有不同的行为，请将它们分解为单独的规则集

两个名称

的行为相同

.name
  .username, .nickname
    a:link, a:visited, a:hover, a:active, a:focus
      :color #AAA      
      :text-decoration none

或为每个

指定不同的行为

.name
  .username
    a:link, a:visited, a:hover, a:active, a:focus
      :color #AAA      
      :text-decoration none
  .nickname
    a:link, a:visited, a:hover, a:active, a:focus
      :color #00A      
      :text-decoration underline