悬停只适用于一个元素

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

您正在使用ID选择器。 ID只能在页面上放置一次。你可以为此使用类选择器。

<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。