使用 CSS 鼠标悬停时带有弹出图像的缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14832164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Thumbnails with pop-up image on mouseover with CSS
提问by reggie
I have a row of thumbnails (container elements) that are set to float left; The thumbnails are scaled down to fit in a row.
我有一排缩略图（容器元素）设置为向左浮动；缩略图按比例缩小以适合一行。
<style type="text/css">
.thumbnails{
float:left;
position:relative;
}
.thumbnails img{
/* ... */
width:65px;
height:47px;
}
</style>
When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail with its original size:
当用户将鼠标悬停在缩略图上时，我想以原始大小显示缩略图的弹出窗口：
<style type="text/css">
/* in addition to the above... */
.th_selector:hover img{
position:absolute;
top:-30px;
left:-30px;
width:150px;
height:113px;
display:block;
z-index:999;
}
</style>
Once I move the mouse over a thumbnail, the image bigger image is shown (as intended). But I have two problems: 1) The other thumbnails jump one position to the left. They end up below the pop-up image. This can also create a flicker (depending on the position of the mouse pointer). 2) If the window is too small and if there are two rows of thumbnails, there is a line-break (which is not very nice).
一旦我将鼠标移到缩略图上，就会显示更大的图像（按预期）。但我有两个问题：1）其他缩略图向左跳一个位置。它们最终位于弹出图像下方。这也会产生闪烁（取决于鼠标指针的位置）。2）如果窗口太小，如果有两行缩略图，有一个换行符（不太好）。
How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?
如何创建一行带有漂亮悬停图像的缩略图，同时保持缩略图的原始位置？
回答by Alan Jenkins
.thumbnails {
float:left;
position:relative;
width: 65px;
margin-right: 10px;
}
.thumbnails img{
position:relative;
display:block;
width:65px;
height:47px;
}
.thumbnails:hover img {
top:-25px;
left:-40px;
width:150px;
height:100px;
z-index:999;
}
http://jsfiddle.net/functionfirst/V4YaQ/1/
http://jsfiddle.net/functionfirst/V4YaQ/1/
In your code example, you shouldn't use position absolute as this declaration removes the element from the document flow. This essentially means the element no longer has a 'foot-print' on the page, hence thumbnails to the right are effectively collapsing in under the now absolutely positioned element.
在您的代码示例中，您不应使用绝对位置，因为此声明会从文档流中删除元素。这实质上意味着该元素在页面上不再有“足迹”，因此右侧的缩略图有效地折叠在现在绝对定位的元素下。
