我有一排设置为向左浮动的缩略图(容器元素);
缩小缩小以适合连续.
当用户将鼠标悬停在缩略图上时,我希望以原始大小显示缩略图的弹出窗口:
将鼠标移到缩略图上后,将显示图像较大的图像(按预期).
但我有两个问题:
1)其他缩略图向左跳一个位置.它们最终低于弹出图像.这也可以创建一个闪烁(取决于鼠标指针的位置).
2)如果窗口太小而且有两行缩略图,则会有换行符(这不是很好).
最佳答案
.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/
在您的代码示例中,您不应使用position绝对值,因为此声明会从文档流中删除元素.这实际上意味着元素不再在页面上具有“足印”,因此右侧的缩略图在现在绝对定位的元素下有效地折叠.