Jquery 在鼠标悬停表行上显示/隐藏Div

我想在鼠标悬停在每个

表行上时显示一个div。这样，悬停的
表格行的
div.tools
将在悬停时显示和隐藏

这是我的桌子

<table width="99%" cellspacing="0" cellpadding="2" class="main-box">
 <tbody><tr class="dataTableHeadingRow">
 <td class="dataTableHeadingContent">Categories / Products</td>
 <td class="dataTableHeadingContent" align="right">Action&nbsp;</td>
 </tr>

 <tr id="product_37">
   <td class="dataTableContent">
    <a href="#">Cotton Piqué Tennis Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <img src="#/images/icon_arrow_right.gif" border="0" alt="">&nbsp;
   </td>
 </tr>

 <tr id="product_39">
   <td class="dataTableContent">
    <a href="#">Leather Plus Cotton Cut-Out Sling Back Sandal</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <a href="#"><img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
   </td>
  </tr>

  <tr id="product_38">
    <td class="dataTableContent">
     <a href="#">Poly-Cotton 3/4 Sleeve Raglan Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
    </td>
    <td class="dataTableContent" align="right">
     <a href="#">
     <img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
    </td>
  </tr>

  </tbody>
</table>

使用
.find（）
而不是
.children（）

您正在使用的只查找直接子元素，在您的tr元素的情况下，这些子元素将是tds

它在所有后代中查找，因此它将在tds中查找您的div

您还遇到了一个语法错误，该错误完全停止了代码的工作：有一个额外的结束符（
）

此外，与使用
*
选择所有元素相比，只选择该表中的tr元素可能更有效：

jQuery(function() {
    jQuery('table.main-box tr[id^=product_]').hover(function() {
        jQuery(this).find("div.tools").show();
    }, function() {
        jQuery(this).find("div.tools").hide();
    });
});​

这不起作用，因为您还有一个语法错误：您有一个额外的结束（
}）。对不起，一开始我没注意到。试一试：（注意，在你的提琴中，如果你按下“整理”按钮，它会修复缩进并使语法错误更加明显，但是如果你检查浏览器的JS控制台，错误也会显示出来。）
jQuery(function() {
    jQuery('table.main-box tr[id^=product_]').hover(function() {
        jQuery(this).find("div.tools").show();
    }, function() {
        jQuery(this).find("div.tools").hide();
    });
});​