Question

我制作了一个弹出式div，它将悬停在另一个图像上显示。 popup 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

Answer 2

如果我理解正确，你想让你的盒子一直显示，即使在滚动时也是如此？

如果是这样，您需要使用position: fixed。

我在图像上创建了一个简单的小型悬停效果，您可以将鼠标悬停在不同的图像上，并查看正在显示的图像编号。

这应该适合你想要完成的事情

http://jsfiddle.net/TMjeb/2/

悬停时显示完整弹出窗口

2 个答案: