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

【问题标题】：Show content on link_to using hover (rails)使用悬停（rails）在 link_to 上显示内容
【发布时间】：2013-02-28 01:38:35
【问题描述】：

目前我有一个link_to，点击它会打开一个弹出窗口。我想添加一个功能，以便当我将鼠标悬停在链接上时，它会显示某些内容。我想在鼠标悬停时显示喜欢类似 facebook 帖子的用户。

悬停时我想通过

显示谁喜欢该帖子

render micropost.voters_who_voted

microposts/_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; }
}

}

【问题讨论】：

那么，您发布的代码是否有效？另外，“悬停时我想”是什么意思？你想做什么？
我发布的代码有效。但它不会在鼠标悬停时显示内容，我不知道该怎么做。当我将鼠标悬停在该 link_to 上时，我显然希望它显示正确的内容？那段代码就是我想要展示的。

标签： css ruby-on-rails hover link-to mousehover

【解决方案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()

【讨论】：

【解决方案2】：

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

【讨论】：