如何使用jQuery在histed元素旁顯示div？

比方說，我有幾個DIV的像這樣的：如何使用jQuery在histed元素旁顯示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上...

沒有人有此一招？

P.S.我不想彈出框顯示在每個.ProfilePic div的我的...

EDIT2：似乎jQuery的.find()穿越功能是獲取具體 .PopupBox我想關鍵顯示，而不是全部。

來源

2011-05-10 KristianB

'我不希望每個彈出框都顯示......彈出窗口顯示的條件是什麼？你能顯示包括div在內的完整標記嗎？ – TheVillageIdiot 2011-05-10 15:24:15

條件是，當我將鼠標懸停在'.ProfilePic' DIV的** __一個__ **上時，我只希望彈出框顯示在旁邊 - 即使它隱藏並在每個「\」中指定。 ProfilePic' DIV's。 – KristianB 2011-05-10 15:44:35

你能告訴我們你在哪裏保持彈出框嗎？ – 2011-05-10 15:46:03

我還沒有測試代碼，但這是你在找什麼？

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

來源

2011-05-10 15:28:26

如何獲得'$（「＃divToShow」）;'？ – TheVillageIdiot 2011-05-10 15:32:07

我假設有一個div顯示根據懸停圖像的動態內容。但是，是的，我給出的例子只是爲了顯示div，而不是內容。也許我錯了：D。 – 2011-05-10 15:35:36

給你信譽讓我回答。查看我的編輯瞭解更多信息。 – KristianB 2011-05-10 15:51:44

爲什麼不簡單地使用CSS定位？

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

來源

2014-12-05 06:18:40 user2579823

如何使用jQuery在histed元素旁顯示div？

回答

相關問題