Question

嘿，这是我的第一个问题，所以如果我出错了，我很抱歉。

我正在尝试使用仅 HTML和CSS创建一个库，到目前为止，我已经将它全部对齐并且几乎排序了。问题在于悬停时的图像放大器，当您将鼠标悬停在放大的图像上时会显示在相应的图像上，但是当您向下滚动并将鼠标悬停在图像上时，放大的图像会保持不变并且不会跟随图片。

我已尝试使用 position 属性来播放图像和悬停的图像，但我无法正确使用它。我仍然希望图像能够“弹出”div。

我将代码粘贴在以下链接上：
http://pastebin.com/fZxbKZEJ

Answer 1

将position: absolute;更改为position:fixed;。这将使图像相对于视图弹出。与margin一起玩，以使对齐正确。

例如：

margin: 100px auto 0;

所以，

.bigImage{         
     display:none;
     position:fixed;
     height:310px;
     width:250px;
     margin:100px auto 0;
     border:2px solid #39F;
 }

如果您只想让弹出窗口跟随原始图像，请执行此操作

.bigImage{         
     display:none;
     position:relative;
     height:310px;
     width:250px;
     margin:-260px 0 0 -45px;
     border:2px solid #39F;
 }

如何在我的CSS库中正确定位图像？

1 个答案: