如何使用jquery在鼠标上方显示/隐藏div？

我有一张这种格式的表格。

<table>
      <tr>
         <td id="divOne">div one</td>
         <td  id="divOne">2222</td>
      </tr>
      <tr>
         <td  id="divOne">div two</td>
         <td  id="divOne">2222</td>
      </tr></div>
</table>

第一组
2222
第二组
2222

和jquery函数，用于在鼠标上方显示/隐藏div

$(function() {
$('#divOne').hover(function() { 
    $('#Details').show(); 
}, function() { 
    $('#Details').hide(); 
});
});

<div id = "Details" style="display: none;">
5555
</div>

$（函数（）{
$（'#divOne'）。悬停（函数（）{
$（“#详细信息”）.show（）；
}，函数（）{
$（“#详细信息”）.hide（）；
});
});
5555

当我在每个td上鼠标悬停时，我想在弹出窗口中显示“详细信息”div。
当我将鼠标移到第一行上时，“Details”div出现。但当我将鼠标移到第二行时，它不会显示。
我不知道哪里出了问题。

---

任何想法都将不胜感激。

页面上应该只有一个ID。更改类的ID和类选择器的选择器：

<table>
      <tr>
         <td class="divOne">div one</td>
         <td class="divOne">2222</td>
      </tr>
      <tr>
         <td class="divOne">div two</td>
         <td class="divOne">2222</td>
      </tr>
</table>

---

页面上应该只有一个ID。更改类的ID和类选择器的选择器：

<table>
      <tr>
         <td class="divOne">div one</td>
         <td class="divOne">2222</td>
      </tr>
      <tr>
         <td class="divOne">div two</td>
         <td class="divOne">2222</td>
      </tr>
</table>

---

使用类而不是ID

$(function() {
$('.divOne').hover(function() { 
    $('#Details').show(); 
}, function() { 
    $('#Details').hide(); 
});
});

HTML:

divone

使用类而不是ID

$(function() {
$('.divOne').hover(function() { 
    $('#Details').show(); 
}, function() { 
    $('#Details').hide(); 
});
});

HTML:

divone

首先，元素上有重复的ID，这是错误的。改用类，ID应该是唯一的

<table>
      <tr>
         <td class="divOne">div one</td>
         <td  class="divOne">2222</td>
      </tr>
      <tr>
         <td  class="divOne">div two</td>
         <td  class="divOne">2222</td>
      </tr>
</table>

---

这将（与实际标记一起）结束，结果是当您将鼠标悬停在表上时，您的div将被显示，而当您没有时，它将被隐藏。首先，您在元素上有重复的id，这是错误的。改用类，ID应该是唯一的

<table>
      <tr>
         <td class="divOne">div one</td>
         <td  class="divOne">2222</td>
      </tr>
      <tr>
         <td  class="divOne">div two</td>
         <td  class="divOne">2222</td>
      </tr>
</table>

---

这将结束（与实际标记一起），结果是当您将鼠标悬停在表上时，将显示div，当您不给多个元素赋予相同的id时，它将被隐藏

实时代码在这里

第一组
2222
第二组
2222
5555shdrhdrh
​
$（函数（）{
$（'.divOne'）.hover（函数（）{
$（“#详细信息”）.toggle（）；
});
});
​

您不能为多个元素提供相同的id

实时代码在这里

第一组
2222
第二组
2222
5555shdrhdrh
​
$（函数（）{
$（'.divOne'）.hover（函数（）{
$（“#详细信息”）.toggle（）；
});
});
​

id属性指定HTML元素的唯一id（该值在HTML文档中必须是唯一的）

第一组
2222
第二组
2222
5555
$（函数（）{
$（'#divOne td'）。悬停(
函数（）{$（'#详细信息'）.show（）；}，
函数（）{$（'#详细信息'）.hide（）；}
);
});

id属性指定HTML元素的唯一id（该值在HTML文档中必须是唯一的）

第一组
2222
第二组
2222
5555
$（函数（）{
$（'#divOne td'）。悬停(
函数（）{$（'#详细信息'）.show（）；}，
函数（）{$（'#详细信息'）.hide（）；}
);
});

将您的id更改为类标识符。 请参见此处的示例：

---

将您的id更改为类标识符。 请参见此处的示例：

---

ID是唯一的标识符，在网页上只能使用一次。请改用类。ID是唯一标识符，在网页上只能使用一次。改为使用类。

<table>
      <tr>
         <td class="divOne">div one</td>
         <td  class="divOne">2222</td>
      </tr>
      <tr>
         <td  class="divOne">div two</td>
         <td  class="divOne">2222</td>
      </tr></div>
</table>

<div id = "Details" >
5555shdrhdrh
</div>
​

$(function() {
$('.divOne').hover(function() { 
    $('#Details').toggle(); 
});
});
​

<table id="divOne">
  <tr>
     <td>div one</td>
     <td>2222</td>
  </tr>
  <tr>
     <td>div two</td>
     <td>2222</td>
  </tr>
</table>
<div id="Details" style="display: none;">
    5555
</div>
<script type="text/javascript">
    $(function() {
        $('#divOne td').hover(
            function() { $('#Details').show(); }, 
            function() { $('#Details').hide(); }
        );
    });
</script>