jquery - 悬停时完整弹出显示

Question

我制作了一个弹出式 div，它会在悬停在另一张图片上时显示。弹出式 div 使用 like 显示

div.image-normal{//image is in this div
height:315px;
}
img:hover div.popup{
  display:block;
  position:absolute;
  top:-315px;
  height:328px;
}

我在 3 行中有 12 个图像。当我滚动时，有时 div.popup 从浏览器顶部区域被截断。我希望当弹出窗口显示并关闭时，它会自动滚动并适合浏览器窗口。任何想法？

Answer 1

更改弹出窗口的位置。这会将其置于屏幕中央。

img:hover div.popup {
    display:block;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height:328px;
}

DEMO HERE