Javascript “悬停”仅适用于一个元素

我正在使用JavaScript，并试图在鼠标悬停时显示每个元素的信息。到目前为止，我只得到了第一个元素的信息，第二个元素没有激活。如何让所有元素都工作

下面是JavaScript代码：

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

我是一个用户。把你的鼠标移到我身上
关于用户的扩展信息
我是一个用户。把你的鼠标移到我身上
我得到了一条无用的信息。在我身上徘徊是没有用的。

---

如果不发生类似情况，则不能在多个元素上使用相同的“id”值。相反，使用“类”

“弹出窗口”也是如此，但对于它，您将需要如下内容：

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

---

这将在悬停的

之后找到下一个元素，该元素具有类“popup”，并显示/隐藏它。如果没有这样的元素，就不会发生任何事情。

您使用的是一个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();
});

我是一个用户。把你的鼠标移到我身上
关于用户的扩展信息
我是一个用户。把你的鼠标移到我身上
$（'.user'）.hover（函数（）{
$（'弹出窗口'）.show（）；
}，函数（）{
$（'弹出'）.hide（）；
});

---

.

您的标记不一致，您不能在一个页面上有两个或多个具有相同id的元素。请始终随身携带：

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

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

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