How to show a div next to the hovered element with jQuery?

Question

Let's say i have several div's like these:

EDIT:

<div class="ProfilePic">
    <a href="#">
        <img src="lib/css/img/profile_pic1.png" alt="" class="ProfilePicImg"/>
    </a>

    <div class="PopupBox" style="display:none;"> ... </div>
</div>

I want to be able to hover over the image .ProfilePicImg and show a another div relatively to it.

The box to popup on hover is set to position:absolute. And the .ProfilePic's position is relative. Just like it should be.

I have tried different solutions, but in vain... And I have also searched around here on StackOverflow...

Does anyone have a trick for this?

P.S. I don't want the popup box to show on each of the .ProfilePic div's I have...

EDIT2: It seems jQuery's .find() traversal function was the key to fetch the specific .PopupBox i wanted to show, instead of the all.

Answer 1

I haven't tested the code but is this what you are looking for?

$(".ProfilePicImg").hover(function(){
    var divToShow = $(this).parent("a").siblings("div.PopupBox");
    divToShow.css({
        display: "block",
        position: "absolute",
        left: ($(this).offset().left + $(this).width()) + "px",
        top: $(this).offset().top + "px"
    });
},
function(){
    $("div.PopupBox").hide();   
});