Отображение / скрытие изображения при наведении курсора на строку таблицы с помощью обхода jquery?

Question

У меня есть несколько строк таблицы (ick!), Таких как:

<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. Идентификаторы предназначены для уникальных элементов, класс - для классификации нескольких похожих элементов.

Answer 2

Я бы использовал .live и .closest вместо того, чтобы прикреплять несколько обработчиков мыши и .parents. Также, как указывалось в предыдущем ответе, используйте классы как идентификаторы.

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