Создание всплывающего окна, когда ссылка наведена, как в Facebook, когда вы помещаете курсор на ссылку, и на ней отображаются такие параметры, как отправить сообщение

Question

Я программист в rails и пытаюсь создать всплывающее окно при наведении ссылки.

В моем проекте я перебираю массив и показываю разных пользователей (например, изображение пользователя, имя пользователя и т. Д.).Мне нужна ситуация, когда при наведении курсора на имя пользователя (которое является ссылкой) всплывающее окно будет отображаться только для этого пользователя.

Я искал некоторые другие сайты и получил некоторые идеи JavaScript, которыеЯ разместил ниже.Но моя проблема с кодом состоит в том, что, когда я помещаю курсор на одно имя пользователя (которое является ссылкой и имеет ссылку div), все всплывающие окна div от каждого другого пользователя будут отображаться вместо только этой ссылки имени пользователя.

Пожалуйста, что я могу сделать?

$('#link').hover(function(e) {
  $('div#pop-up').show();
  //.css('top', e.pageY + moveDown)
  //.css('left', e.pageX + moveLeft)
  //.appendTo('body');
}, function() {
  $('div#pop-up').hide();
});

html

<%= for update in @updates%>
<div id="link-pop" style="display:none"><%=update.user_type%></div> 
<div id="content">
<%= update.user_name%>
</div>
<%end%>

Answer 1

Все всплывающие элементы div от всех остальных пользователей будут отображаться вместо ссылки на имя пользователя.

Ну, это потому, что вы вызываете все всплывающие окна $('div#pop-up').show();.
Если вам нужно показать только всплывающее окно относительно этой ссылки, вы можете выбрать его либо по index(), либо, если это дочерние элементы #link, то будет работать что-то вроде $(this).find('#popup').

Answer 2

с html-кодом:

<a href="#" onhover="$('this').next().show();">some text</a>
<div style="display:hidden">user info</div>

проблема с вашим кодом - идентификатор.Идентификатор, насколько я знаю, должен быть уникальным на странице, чтобы он вызывал проблемы ...

edit

Вы говорите, что хотите всплывающее окно, как в Facebook, так чтоздесь идет некоторый псевдокод (так как я не разбираюсь в ruby):

Вы должны иметь и массив объектов или какой-то тип данных, содержащий вашу информацию.

При генерации htmlу вас должно получиться что-то вроде этого:

while(users)
print "<a href="#" onhover="$('this').next().show();">user->name</a>
       <div class="hidden-user-info">
             <img src="user->photo" alt="some description">
             <span>user->name</span>
             etc...
        </div>

Опять же, это псевдокод ... CSS должен выглядеть так:

.hiden-user-info{display:none;position:relative;z-index:20;}

Решение, указанное выше, следует использовать, если выпредставление всех пользовательских ссылок при создании html-кода.

Если вы создаете его динамически, возможно, ему придется развить какой-то вызов ajax или манипулирование dom с помощью jquery.ссылка трудно помочь больше ... Извините

Answer 3

Какой у тебя HTML? Возможно, у вас есть пара div с одинаковым идентификатором.