Showing/hiding image upon mouse over of table row via jquery traversal?

Question

I have some rows of a table (ick!) such as:

<tr id="similar_story">
<td class="title"><a href="/">Title</a> <a href="../"><img id="srcimg" src="source.png" style="display:none"></a></td>
</tr>

this is repeated x times [for each similar story], and when a user hovers over the .class row I want #srcimg (for that row) to appear.

When that row loses focus, the #srcimg should disappear.

What is the suitable method to do this via jquery? I tried doing something along the lines of:

jQuery('td.title').mouseover(function() {
jQuery.('#srcimg').visible();
});

But that (obviously?) shows the #srcimg on every row. Whereas, I just want to show the one in that table row.

I guess there has to be some traversal to locate the appropriate image?

Answer 1

jQuery('td.title').mouseover(function() {
    jQuery(this).parents("tr:first").find('#srcimg').visible();
});

You should exchange the id for class on the image, tho. IDs are for elements that are unique, class is for classification of multiple similar elements.

Answer 2

I would use .live and .closest rather than attach multiple mouseover handlers and .parents. Also as the earlier answer pointed out, use classes as id's are unique.

jQuery('td.title').live('mouseover', function() {
    jQuery(this).closest("tr").find('img.someClass').visible();
});