縮略圖與彈出式圖像鼠標懸停與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/

在你的代碼示例，因爲這個聲明會刪除從文檔流的元素，你不應該使用絕對位置。這基本上意味着該元素不再在頁面上具有「足跡」，因此右側的縮略圖在現在絕對定位的元素下有效地摺疊。