Show table cell on table row mouseover
<p>I have a table that looks something like this.</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Foo&lt;/th&gt;
      &lt;th&gt;Bar&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr class="data"&gt;
      &lt;td&gt;Info here&lt;/th&gt;
      &lt;td&gt;&lt;a href"/url_here" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="data"&gt;
      &lt;td&gt;More here&lt;/th&gt;
      &lt;td&gt;&lt;a href"/url_here" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I want to show the Edit link when you mouse over any of the rows inside of the . I have tried a few methods of doing this, but keep hitting the same problem. Assuming I'm just thinking about this the wrong way.</p>

<p>This is what I currently Have.</p>

<pre><code>$('a[class*=edit]').hide(); 

$('tr[class*=data]').bind("mouseover", function(e) {
  $(e.target).closest('a[class*=edit]').addClass("selected");
  $('a[class*=selected]:first').show();
}).mouseout(function() {
  $('a[class*=selected]').hide();
  $('a[class*=edit]').removeClass("selected");
})
</code></pre>

<p>Problem with the existing code is it's not adding the selected class unless you hover directly over the edit link. Like I mentioned above I need it to add the selected class when you mouse over anywhere in the that row. I also only want it to display the edit link for that specific row.</p>

<p>Any help would be really appreciated been pulling my hair out for a couple hours and I know it is probably something stupid. Thanks!</p>
