Question

I wanted to show a div located on each table row when the mouse is over it. So that the div.tools of the hovered table row will be displayed and hidden on hover out.

Here is my table.

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

I tried this jQuery function but its not working.

jQuery(function() {
 jQuery('*[id^=product_]').hover(function(){
   jQuery(this).children("div.tools").show();
    },function(){
   jQuery(this).children("div.tools").hide();
    });
 });
});

Answer 1

Use .find() instead of .children().

The .children() method that you’re using only finds immediate children, which in the case of your tr elements will be the tds.

The .find() method looks amongst all descendants, so it will look inside the tds to find your divs.

You’ve also got a syntax error that is stopping your code working at all: there’s an extra closing }); at the end that should be removed.

Also, rather than selecting on all elements using *, it may be more efficient to select just the tr elements within that table:

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