jquery - 如何使用 jquery 在鼠标悬停时显示/隐藏 div？

Question

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

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

和一个在鼠标悬停时显示/隐藏 div 的 jquery 函数

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

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

当我将鼠标悬停在每个 td 上时，我想在弹出窗口中显示“详细信息”div。
当我将鼠标悬停在第一行上时，会出现“详细信息”div。但是当我鼠标悬停在第二行时它没有显示。
我不确定哪里出错了。
任何想法将不胜感激。

Answer 1

页面上应该只有一个ID。更改您的类(class) ID 和类(class)选择器的选择器:

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

和:

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