Javascript 在鼠标悬停时为每个表格行显示弹出窗口

当我将鼠标移动到表格每一行的文本上时，我想显示一个弹出窗口。 我使用的代码如下：

$.fn.ready（函数（）{
$（'#pizzaname'）。悬停（函数（）{
$（'弹出窗口'）.show（）；
}，函数（）{
$（'弹出'）.hide（）；
});
});

勒诺斯特披萨酒店
利斯塔·德尔·皮兹
Nome
Ingredienti
Prezzo

此代码正确显示弹出窗口，但仅显示第一行。如果我将鼠标移到第二行、第三行或任何其他行的名称上，弹出窗口不会出现。

---

做了一些测试，更改了ID，但找不到错误。有解决方案吗？

这是因为

pizzaname

和

popup

应该是类，而不是id。在HTML中更改此选项：

<td class="pizzaname"
<div class="popup"

---

了解更多信息。

在处理同一类型的多个元素时（在本例中，文本位于表中的多行中），始终在标记中使用类而不是ID。然后在Javascript中相应地绑定函数

为了帮助您更好地理解，ID是唯一的标识符。就像你的护照号码一样，唯一的身份就是你。世界上只有一个人有这个号码。同样，每个元素的ID都应该是唯一的。 另一方面，类用于标识类似的实体。例如，一班经济学学生将分享一些共同的属性（比如上午9点到10点学习宏观经济学的课程）。因此，在您的例子中，元素应该具有相同的类名（因为每个元素上的悬停效果）将是一个公共属性

因此，您的HTML会像这样改变，使用类而不是ID

.....
<td class="pizzaname">
    <%= product.nome_pizza%>
       <div class="popup" style=" height: 50px;">
.....

---

ID在DOM中应该是唯一的

.....
<td class="pizzaname">
    <%= product.nome_pizza%>
       <div class="popup" style=" height: 50px;">
.....

  $('.pizzaname').hover(function() {
    $(this).find('.popup').show();
  }, function() {
    $(this).find('.popup').hide();
  });