title: display and hide on mouse hover
body: <p><br/>
  i have a table and in my table row there is one column for each and every row where i want to display an image on mouse hover and hide on hover out.</p>
  
  <p>here is my table code.</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" border="0" class="display dTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="width:5%;"&gt; &amp;nbsp; &lt;/th&gt;
              &lt;th style="width:10%;"&gt;Estimate#&lt;/th&gt;
              &lt;th style="width:20%;"&gt;Reference&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Customer Name&lt;/th&gt;
              &lt;th style="width:15%;"&gt;Date&lt;/th&gt;
              &lt;th style="width:10%;"&gt;Amount&lt;/th&gt;
              &lt;th style="width:10%;"&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="gradeA"&gt;
              &lt;td class="context"&gt;
                  &lt;a href="#" title="" class="smallButton" style="margin:5px;display:none;"&gt;
                      &lt;img src="images/icons/dark/cog3.png" alt=""/&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="center"&gt;&lt;a href="#"&gt;EST-1&lt;/a&gt;&lt;/td&gt;
              &lt;td align="center"&gt;Invoic 2,3&lt;/td&gt;
              &lt;td align="center"&gt;&lt;a href="#"&gt;Fahamco Distrubutions&lt;/a&gt;&lt;/td&gt;
              &lt;td align="center"&gt;02-05-2012&lt;/td&gt;
              &lt;td align="center"&gt;&amp;yen;89800909&lt;/td&gt;
              &lt;td align="center"&gt;pending&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="gradeX"&gt;
              &lt;td class="context"&gt;
                  &lt;a href="#" title="" class="smallButton" style="margin:5px;display:none;"&gt;
                      &lt;img src="images/icons/dark/cog3.png" alt="" /&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="center"&gt;&lt;a href="#"&gt;EST-1&lt;/a&gt;&lt;/td&gt;
              &lt;td align="center"&gt;Invoic 2,3&lt;/td&gt;
              &lt;td align="center"&gt;&lt;a href="#"&gt;Fahamco Distrubutions&lt;/a&gt;&lt;/td&gt;
              &lt;td align="center"&gt;02-05-2012&lt;/td&gt;
              &lt;td align="center"&gt;&amp;yen;89800909&lt;/td&gt;
              &lt;td align="center"&gt;pending&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>there is an <code>anchor</code> tag with image in the first column of every row, which is hidden initially, i want to display the image on mouse hover for each element.</p>
  
  <p>here is the jquery code i tried using.</p>
  
  <pre><code>$('.context').hover(
      function() {
          $('.context a').show();
      },
      function() {
          $('.context a').hide();
      }
  );
  </code></pre>
  
  <p>the above code displays all the anchor tag, what i want is display only the corresponding element.</p>
  
  <p>and also is there a way i could achieve this without using class or id attribute in <code>&lt;td&gt;</code> element.</p>