通过jQuery遍历将鼠标悬停在表行上时显示/隐藏图像？

Question

我有一个表的某些行（益！）如：

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

这种重复x次[每个类似的故事]，并且当用户将鼠标悬停在的.class行我想#srcimg（该行）出现。

当该行失去焦点时，#srcimg应该消失。

什么是适当的方法来做到这一点通过jQuery的？我试图沿着线做的事情：

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

但是，（显然？）显示了每一行的#srcimg。而我只想显示那个表格中的那个。

我想必须有一些遍历来找到合适的图像？

Answer 1

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

您应该在图像上交换类的id，tho。 ID是用于唯一的元素，类用于多个相似元素的分类。

Answer 2

我会使用.live和.closest，而不是附加多个mouseover处理程序和.parents。 也正如前面的答案指出的那样，使用类作为id是唯一的。

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