如何使div可单击，但不希望内部元素看起来像与Rails的链接？

Question

我正在为我的项目开发消息传递功能。现在，我对如何使div可点击（将用户带到对话标签）有些困惑。

这是我的代码：

        <%= link_to conversation_messages_path(conversation) do %>
          <li>
            <div class="well row" id='conversation-well-row'>
              <div class="col-sm-2">
                <%= image_tag recipient.profile.avatar.url, class: 'conversation-index-avatar' %>
              </div>
              <div class="col-sm-10">
                <h4><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
                <h5 class="text-black-50">Last message preview</h5>
              </div>
            </div>
          </li>
        <% end %>     

它使我的<div class="well">可以点击，但也使其他所有内容看起来像该div中的链接。我该如何仅使井井有条？

看起来像this。

我希望名称和消息预览都像文本一样被预览，并且我想将头像作为个人资料的链接。

Answer 1

如果您希望文本看起来不像链接，则需要对文本应用CSS。

为此，在文本中添加一个类：

<h4 class="no-link-style"><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
<h5 class="no-link-style text-black-50">Last message preview</h5>

然后在您的CSS文件中，添加此类的CSS：

.no-link-style {
    color: #000000 !important;
    text-decoration: none !important;

}

使用您选择的颜色代码，＃000000表示黑色

Answer 2

要使div可点击，只需向其中添加clickable类，并从其中删除well类：

您的代码如下：

<%= link_to conversation_messages_path(conversation) do %>
  <li>
    <div class="clickable row" id='conversation-well-row'>
      <div class="col-sm-2">
        <%= image_tag recipient.profile.avatar.url, class: 'conversation-index-avatar' %>
      </div>
      <div class="col-sm-10">
        <h4><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
        <h5 class="text-black-50">Last message preview</h5>
      </div>
    </div>
  </li>
<% end %>

还要在css文件中添加css为：

.clickable {
  cursor:pointer;
}