Geek Answers Handbook

How to show div next to hover element using jQuery?

Let's say I have several divs:

EDIT:

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

I want to hover over the image .ProfilePicImgand show another div relative to it.

In the pop-up box, hover over position:absolute. And the position is .ProfilePicrelative. As it should be.

I tried different solutions, but in vain ... And I also searched here on StackOverflow ...

Does anyone have a trick for this?

PS I don’t want the popup to appear on each of the .ProfilePicdivs that I have ...

EDIT2: It seems that the jQuery traversal function .find()was the key to getting the specific .PopupBox that I wanted to show instead of all.

+5
2

, , ?

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

CSS?

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

More articles:


All Articles