Question

目前我有一个link_to，当点击它时会打开一个弹出窗口。我想添加一个函数，这样当我将鼠标悬停在链接上时，它会显示某些内容。我想在鼠标悬停时向用户展示喜欢与facebook相似的帖子。

悬停时我想通过

显示谁喜欢这个帖子

render micropost.voters_who_voted

微柱/ _micropost：

<%= link_to into_it_micropost_path(micropost.id), :onclick => "javascript:window.open('/microposts/#{micropost.id}/into_it','popup','width=285,height=300,top=315,left=200');", id: "feeditemlikes_#{micropost.id}", remote: true do %>
  <%= "#{micropost.votes_for} Into it!" %>
    <ul class="likes">
      <%= render micropost.voters_who_voted %>
    </ul>
<% end %>

CSS：

[id^=feeditemlikes] {
  .likes { display: none; }
  &:hover {
    text-decoration: none;
    color: $blue;
    .likes { display: block; }
}

}

Answer 1

如果要使用CSS在悬停时显示某些内容，则该内容必须是接收:hover的元素的子元素（在本例中为链接）。例如：

ERB：

<%= link_to into_it_micropost_path(micropost.id), :onclick => "javascript:window.open('/microposts/#{micropost.id}/into_it','popup','width=285,height=300,top=315,left=200');", id: "feeditemlikes_#{micropost.id}", remote: true do %>
  <%= "#{micropost.votes_for} Into it!" %>
  <ul class="users">
    <%= render @user.names %>
  </ul>
<% end %>

SCSS：

[id^=feeditemlikes] {
  .users { display: none; }
  &:hover {
    text-decoration: none;
    color: $blue;
    .users { display: block; }
  }
}

（顺便说一句，我不会使用[id^=feeditemlikes]，而是在链接上放一个类并参考它。见下文。）

但是如果你想在悬停时显示不是链接子元素的内容，那么你需要使用JavaScript。

以下是使用CoffeeScript和jQuery的示例：

$('a.feed-item-likes').hover ->
  $('.users').toggle()

Answer 2

您可以使用以下插件：http://jqueryui.com/tooltip/在鼠标悬停在链接上时创建工具提示。你所做的是让你的视图级代码打印出链接的标题标签中的内容，插件将为你弹出。

使用悬停（rails）在link_to上显示内容

2 个答案: