title: Show/Hide Div on mouse hover table row
body: <p>I wanted to show a div located on each <code>table row</code> when the mouse is over it. So that the <code>div.tools</code> of the hovered <code>table row</code> will be displayed and hidden on hover out.</p>
  
  <p>Here is my table.</p>
  
  <pre><code>&lt;table width="99%" cellspacing="0" cellpadding="2" class="main-box"&gt;
   &lt;tbody&gt;&lt;tr class="dataTableHeadingRow"&gt;
   &lt;td class="dataTableHeadingContent"&gt;Categories / Products&lt;/td&gt;
   &lt;td class="dataTableHeadingContent" align="right"&gt;Action&amp;nbsp;&lt;/td&gt;
   &lt;/tr&gt;
  
   &lt;tr id="product_37"&gt;
     &lt;td class="dataTableContent"&gt;
      &lt;a href="#"&gt;Cotton Piqué Tennis Shirt&lt;/a&gt;
      &lt;div class="tools" style="display:none;"&gt;Tools Here&lt;/div&gt;
     &lt;/td&gt;
     &lt;td class="dataTableContent" align="right"&gt;
      &lt;img src="#/images/icon_arrow_right.gif" border="0" alt=""&gt;&amp;nbsp;
     &lt;/td&gt;
   &lt;/tr&gt;
  
   &lt;tr id="product_39"&gt;
     &lt;td class="dataTableContent"&gt;
      &lt;a href="#"&gt;Leather Plus Cotton Cut-Out Sling Back Sandal&lt;/a&gt;
      &lt;div class="tools" style="display:none;"&gt;Tools Here&lt;/div&gt;
     &lt;/td&gt;
     &lt;td class="dataTableContent" align="right"&gt;
      &lt;a href="#"&gt;&lt;img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "&gt;&lt;/a&gt;&amp;nbsp;
     &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr id="product_38"&gt;
      &lt;td class="dataTableContent"&gt;
       &lt;a href="#"&gt;Poly-Cotton 3/4 Sleeve Raglan Shirt&lt;/a&gt;
      &lt;div class="tools" style="display:none;"&gt;Tools Here&lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="dataTableContent" align="right"&gt;
       &lt;a href="#"&gt;
       &lt;img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "&gt;&lt;/a&gt;&amp;nbsp;
      &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I tried this jQuery function but its not working.</p>
  
  <pre><code>jQuery(function() {
   jQuery('*[id^=product_]').hover(function(){
     jQuery(this).children("div.tools").show();
      },function(){
     jQuery(this).children("div.tools").hide();
      });
   });
  });
  </code></pre>