javascript - 悬停仅适用于一个元素

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();
});

JSF中。