带有 CSS 的鼠标悬停时弹出图像的缩略图答案

【问题标题】：Thumbnails with pop-up image on mouseover with CSS带有 CSS 的鼠标悬停时弹出图像的缩略图
【发布时间】：2013-01-27 17:40:44
【问题描述】：

我有一排设置为向左浮动的缩略图（容器元素）；缩略图按比例缩小以适应一行。

<style type="text/css">
    .thumbnails{
        float:left;
        position:relative;
    }
    .thumbnails img{
        /* ... */
        width:65px;
        height:47px;
    }
</style>

当用户将鼠标悬停在缩略图上时，我想以原始大小显示缩略图的弹出窗口：

<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>

一旦我将鼠标移到缩略图上，就会显示更大的图像（如预期的那样）。但是我有两个问题： 1) 其他缩略图向左跳一个位置。它们最终位于弹出图像下方。这也可以产生闪烁（取决于鼠标指针的位置）。 2）如果窗口太小，如果有两行缩略图，就会出现换行（这不是很好）。

如何创建一行带有漂亮悬停图像的缩略图，同时保持缩略图的原始位置？

【问题讨论】：

您能否在jsfiddle.net 中创建一个示例以便更好地理解。

标签： css popup mouseover

【解决方案1】：

.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/

在您的代码示例中，您不应使用绝对位置，因为此声明会从文档流中删除元素。这实质上意味着该元素在页面上不再有“足迹”，因此右侧的缩略图有效地折叠在现在绝对定位的元素下方。

【讨论】：