缩略图与弹出式图像鼠标悬停与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）如果窗口太小，并且如果有两排缩略图，就有一个换行符（这不是很好）。

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

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

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

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