3

目前我有一个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; }
}

}

4

2 回答 2

3

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

再培训局：

<%= 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()
于 2013-02-28T04:05:17.263 回答
2

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

于 2013-02-28T02:30:22.263 回答