Javascript 如何使用jQuery在悬停元素旁边显示div？

假设我有几个像这样的分区：

编辑：

... 

我希望能够将鼠标悬停在图像

.ProfilePicImg

上，并显示与其相对的另一个div

悬停时要弹出的框设置为

位置：绝对

。而

.ProfilePic

的位置是相对的。就像它应该的那样

我尝试过不同的解决方案，但都是徒劳的。。。我也在StackOverflow上搜索过

有人有这个窍门吗

p.S.我不希望弹出框显示在我拥有的每个

.ProfilePic

div上

---

EDIT2:似乎jQuery的

.find（）

遍历函数是获取我想要显示的特定.popubox的关键，而不是全部。

我还没有测试代码，但这就是您要找的吗

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

---

为什么不简单地使用CSS定位呢

#PopupBox {
  z-index: 1000;
  margin-top: -15px;
  margin-left: 90px;
  position: absolute;
  background-color: #abcdef;
  padding: 1em;
  border: 1px solid #456789;
}

---

我不希望弹出框显示在每个…

弹出框显示的条件是什么？你能显示完整的标记，包括要显示的div吗？条件是当我将鼠标悬停在

.ProfilePic

div的一个上时，我只希望弹出框显示在它旁边——即使它在许多

.ProfilePic

DIV中都被隐藏和指定。你能告诉我们你把弹出框放在哪里吗？我知道我的信息是有限的。。。我通过编辑来澄清您的问题……您如何获得

$（“#divToShow”）？我假设有一个div根据悬停的图像显示动态内容。但是，是的，我给出的示例仅用于显示div，而不是内容。也许我想错了：D.因为你引导我找到了答案而给了我信任。有关更多信息，请参阅我的编辑。
#PopupBox {
  z-index: 1000;
  margin-top: -15px;
  margin-left: 90px;
  position: absolute;
  background-color: #abcdef;
  padding: 1em;
  border: 1px solid #456789;
}