Javascript-форум - Разворачивание списка при наведение на картинку

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Разворачивание списка при наведение на картинку (https://javascript.ru/forum/jquery/29930-razvorachivanie-spiska-pri-navedenie-na-kartinku.html)

Разворачивание списка при наведение на картинку

Добрый день друзья, начал изучать Jquery, нужно решить задачу по сабжу!

есть таблица с классом .catalog
в ней 4 ячейки, хотелось бы что бы при наведение на фотографию(img) рядом справа появлялся список ul с логотипами(стили я напишу)

получается что в набор попадают все фотографии в ячейках а не в конкретной ячейки и при наведении на любую фотографию в таблице выводится только первый список! Хотелось бы что при наведении на фотографию в данной ячейки выводился список этой же ячейки

table width="100%" border="0" class="catalog">
    <tr>
         <td><img src="images/katalog/samosval.png" alt="Самосвалы" /><p>Самосвалы </p><ul><li>MAN</li><li>MAZ</li></ul><
/td>
      <td><img src="images/katalog/ukladchiki.png" alt="Укладчики" /><p>Укладчики </p><ul><li>MAN</li></ul></td>
                                            <td><img src="images/katalog/katok.png" alt="Катки"/><p>Катки</p></td>
      <td><img src="images/katalog/tiagach.png" alt="Тягач" /><p>Тягачи</p></td>
                                      </tr>
</table>

вот Jquery который написал

jQuery(document).ready(function($) {    
        $('.catalog tr td ul').hide();
        
                $('.catalog tr td img').mouseover(function() {
                $('.catalog tr td ul:first').slideDown();
                });
        
        $('.catalog tr td img').mouseleave(function() {
                $('.catalog tr td ul:first').slideUp();
                });
        });

Жду подсказки, и в какую сторону копать ? как-то не нашел решения

Прочитал тему 5 раз, что то я не догнал :blink: :blink:
там же вообще чистый javascript , а я на jquery, я не могу понять как сделать, что бы в набор попадала картинка нужной ячейки а не все картинки, или надо id надо каждой строке присваивать

Чичас изображу...

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<table width="100%" border="0" class="catalog">
    <tr valign=top>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Самосвалы" /><p>Самосвалы </p><ul><li>MAN</li><li>MAZ</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Укладчики" /><p>Укладчики </p><ul><li>MAN</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Катки"/><p>Катки</p><ul><li>MAN</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Тягач" /><p>Тягачи</p><ul><li>MAN</li></ul>
</td>
    </tr>
</table>
<style type="text/css">
.catalog  td > ul{
  display:none;
  position:absolute;
  z-index:2;
  border:2px solid #F1F2EE;
  padding:4px;
}
</style>
<script type="text/javascript">
$(document).ready(function($) {    
        
                $('.catalog tr td img').mouseenter(function() {
                $(this).parent().find('ul').slideDown();

                }).mouseleave(function() {
                $(this).parent().find('ul').slideUp();
                });
});
</script>

Благодарю=)