Связывание текста без изменения цвета текста на синий

Question

Я использую HAML отображать имя пользователя и имя (в формате одной линии), как показано ниже

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

Как это выглядит на веб

Как я могу сделать всю строку над кликом в Интернете, но в то же время сохранить цвета текста? (т. е. текст «Some Username» может быть связан как «nickname», но сохраните его цвет серый)

Answer 1

Это немного старо, и код, представленный, кажется немного странным, но я собираюсь просто опубликовать фрагмент Haml и ответить на это по отношению к моей сниппета, так и без рельсов хелперы

.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 включить это или некоторое подмножество этих правил, чтобы отключить hoverable подчеркивание также заменить # 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