使用CSS实现鼠标悬停时弹出图片的缩略图

Question

我有一行缩略图（容器元素），它们被设置为向左浮动； 缩略图被缩小以适应一行。

<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. 如果窗口太小，并且有两行缩略图，则会出现换行（这不是很好看）。

我如何创建一行带有漂亮hover-image的缩略图，同时保持缩略图的原始位置？

- reggie

---

你能否在 http://jsfiddle.net 上创建一个示例以便更好地理解？ - sandeep

Answer 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;
}

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

http://jsfiddle.net/functionfirst/V4YaQ/1/

- Alan Jenkins