Question

Alright, so I have some code hurr:

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

Now, it works like a champ. Except for the fact that it occurs on all images simultaneously. I tried to find out how to get it to work on each image separately, but I don’t have the darnest clue.

What I am trying to do specifically is have a hover event on an image occur only when you hover over that specific image. When you hover over an image a div pops up with some fancy caption and so on. However, when I hover on one image all the other images show the same thing (I understand why, just not how to fix it).

I figure it has something to do with adding this to it, but I’m new to JQuery and I’m lost.

HTML:

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

Thanks for the help.

Answer 1

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