我有一行缩略图(容器元素),它们被设置为向左浮动; 缩略图被缩小以适应一行。
<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>
当我将鼠标移动到缩略图上时,会显示更大的图片(正如预期)。
但是我有两个问题:
- 其他缩略图向左跳了一个位置。它们最终出现在弹出图片下面。这可能会导致闪烁(取决于鼠标指针的位置)。
- 如果窗口太小,并且有两行缩略图,则会出现换行(这不是很好看)。
我如何创建一行带有漂亮hover-image的缩略图,同时保持缩略图的原始位置?