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上搜索过...

有没有人有这个技巧？

P.S。我不希望弹出框显示在每个.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;
}

如何用jQuery显示悬停元素旁边的div？

2 个答案: