如何在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我不希望彈出框顯示在每個.ProfilePic div上...

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

Answer 2

為什么不簡單地使用CSS定位呢？

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