Событие при наведении мыши происходит независимо на отдельных изображениях

Question

Хорошо, у меня есть какой-то код:

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $("div.show").slideToggle("fast");
    });
});

Теперь это работает как чемпион. За исключением того, что это происходит на всех изображениях одновременно. Я пытался выяснить, как заставить его работать с каждым изображением отдельно, но у меня нет ни малейшего понятия.

Что я конкретно пытаюсь сделать, так это чтобы событие наведения на изображение происходило только при наведении курсора на это конкретное изображение. Когда вы наводите курсор мыши на изображение, появляется всплывающее окно с какой-то необычной надписью и так далее. Однако при наведении на одно изображение все остальные изображения показывают одно и то же (я понимаю, почему, но не как это исправить).

Я полагаю, это как-то связано с добавлением this к нему, но я новичок в JQuery и потерян.

HTML:

<div class="post photo">
    <img src="source" />
    <div class="show">
        <div class="caption">
        Caption
        </div>
    </div>
</div>

Спасибо за помощь.

Answer 1

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).next("div.show").slideToggle("fast");
    });
});

Answer 2

При этом вы можете не обращать внимания на то, с какой позиции вы поместили свой "show" div в div "post photo" class:

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).parent().children("div.show").slideToggle("fast");
    });
});