如何用jQuery显示悬停元素旁边的div？

Question

假设我有几个这样的 div:

编辑:

<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>

我希望能够将鼠标悬停在图像上.ProfilePicImg并相对于它显示另一个div.

悬停时弹出的框设置为position:absolute.而且这个.ProfilePic位置是相对的.就像它应该的那样.

我尝试了不同的解决方案,但徒劳无功......而且我还在StackOverflow上搜索过...

有没有人有这个伎俩？

PS我不希望弹出框显示在每个.ProfilePicdiv上我...

EDIT2:似乎jQuery的.find()遍历功能是获取我想要显示的特定 .PopupBox 的关键,而不是全部.

Answer 1

我没有测试过代码,但这是你在找什么？

$(".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();   
});