Hovered öğenin yanında jQuery ile nasıl div gösterilir?

Question

en i bunlar gibi birkaç div 's var diyelim:

DÜZENLEME:

Ben resmin .ProfilePicImg üzerinde gezdirin ve nispeten buna bir başka div göstermek isterler

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

.

Vurgulu açılan kutu kutusu position:absolute olarak ayarlanır. Ve .ProfilePic'un konumu görelidir. Olması gerektiği gibi.

Ben farklı çözümler denedim ama nafile ... Ve ayrıca

kimse bunun için bir hile var mı ... Buralarda StackOverflow'daki aramış mı?

P.S. Ben ... pop-up kutusu Ben .ProfilePic div'lerden her birinde gösterilecek istemiyoruz

EDIT2: jQuery'nin .find() kastetmek işlevi İstesem özgü .PopupBox getirmesi anahtar oldu görünüyor tümünü yerine göster.

Answer 1

Kodu test etmedim ama aradığınız şey bu mu?

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

Neden CSS konumlandırmayı kullanmıyorsunuz?

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