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>

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

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

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

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

Answer 1

页面上应该只有一个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>

和

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

Answer 2

你不能给多个元素提供相同的id

实时代码在这里http://jsfiddle.net/GSz5X/

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

Answer 3

首先，你有重复的元素ID，这是错误的。使用类代替，ids应该是唯一的

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

这将最终（使用您的实际标记）结果是当您将鼠标悬停在桌面上时将显示div，并且当您不在桌面时它将被隐藏

Answer 4

USE类而不是ID

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

HTML：

<td class="divOne">div one</td>

Answer 5

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

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

Answer 6

将您的ID更改为类标识符。见这里的例子： http://jsfiddle.net/A7f2p/

如何使用jquery在mouseover上显示/隐藏div？

6 个答案: