3

現在、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; }
}

}

4

2 に答える 2

3

:hoverCSS を使用してホバー時に特定のコンテンツを表示する場合、そのコンテンツは、受け取る要素(この場合はリンク)の子要素である必要があります。例えば：

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()
于 2013-02-28T04:05:17.263 に答える
2

次のようなプラグインを使用できます: http://jqueryui.com/tooltip/ リンクの上にカーソルを置いたときにツールチップを作成します。ビューレベルのコードでリンクのタイトル タグのコンテンツを出力すると、プラグインがそれをポップアップ表示します。

于 2013-02-28T02:30:22.263 に答える