Наведение работает только на одном элементе

Question

Я использую JavaScript и пытаюсь показать каждую информацию об элементах мыши. Пока я получаю только информацию о первых элементах, вторая не активна. Как работать со всеми элементами?

Вот JavaScript код:

$('#user').hover(function() { 
    $('#popup').show(); 
}, function() { 
    $('#popup').hide(); 
}); 

<div id='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div id='user'>I am a user. Move your mouse over me</div> 

<div>I a piece of useless information. No use hovering over me.</div> 

http://jsfiddle.net/Hyw7Z/1/

Answer 1

Вы не можете использовать то же значение "ID" на более чем один элемент без таких вещей, как это происходит. Вместо этого используйте "класс"

<div class="user" ... > 

Тогда в JavaScript:

$('.user').hover(function() { ... 

То же самое касается и "всплывающих окон", но для этого вы хотите что-то вроде этого:

$('.user').hover(function() { 
    $(this).next('.popup').show(); 
}, function() { 
    $(this).next('.popup').hide(); 
}); 

Это найдет следующий элемент после зависания <div>, у которого есть всплывающее окно класса, и показать/скрыть его. Если такого элемента нет, ничего не произойдет.

Answer 2

Вы используете селектор идентификаторов. Идентификаторы разрешены только один раз на странице. Для этого вы можете использовать селектор классов.

<div class='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div class='user'>I am a user. Move your mouse over me</div> 

$('.user').hover(function() { 
    $('#popup').show(); 
}, function() { 
    $('#popup').hide(); 
}); 

JSFiddle.