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

前端之家收集整理的这篇文章主要介绍了如何使用jquery在鼠标悬停时显示/隐藏div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这种格式的表格.
  1. <table>
  2. <tr>
  3. <td id="divOne">div one</td>
  4. <td id="divOne">2222</td>
  5. </tr>
  6. <tr>
  7. <td id="divOne">div two</td>
  8. <td id="divOne">2222</td>
  9. </tr></div>
  10. </table>

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

  1. $(function() {
  2. $('#divOne').hover(function() {
  3. $('#Details').show();
  4. },function() {
  5. $('#Details').hide();
  6. });
  7. });
  8.  
  9. <div id = "Details" style="display: none;">
  10. 5555
  11. </div>

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

解决方法

页面上应该只有一个ID.更改类的ID和类选择器的选择器:
  1. <table>
  2. <tr>
  3. <td class="divOne">div one</td>
  4. <td class="divOne">2222</td>
  5. </tr>
  6. <tr>
  7. <td class="divOne">div two</td>
  8. <td class="divOne">2222</td>
  9. </tr>
  10. </table>

和:

  1. $(function() {
  2. $('.divOne').hover(function() {
  3. $('#Details').show();
  4. },function() {
  5. $('#Details').hide();
  6. });
  7. });

猜你在找的jQuery相关文章