浮动的缩略图图库，带有悬停的额外缩略图内容。如何让悬停的缩略图与邻居重叠？
浮动的缩略图图库，带有悬停的额外缩略图内容。如何让悬停的缩略图与邻居重叠？
提问于 2012-09-24 09:11:59
我有一个缩略图画廊。在每个图像下面，我显示了缩略图标题：
<div class='gallery'>
<div class='thumb'>
<div class='thumbimage'></div>
<div class='thumbtitle'></div>
</div>
<div class='thumb'>
<div class='thumbimage'></div>
<div class='thumbtitle'></div>
</div>
</div>缩略图在栅格中向左浮动：
.thumb {
float: left;
}缩略后的缩略图显示在一行中：
.thumbtitle {
line-height: 1.25em;
min-height: 1.25em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}当用户将鼠标悬停在缩略图上时，缩略的缩略标题将替换为完整的缩略标题：
.thumb:hover .thumbtitle {
height: auto;
line-height: 1.25em;
white-space: normal;
}如果完整的缩略图标题无法放在一行上，则悬停的缩略图框将向下扩展以容纳完整的标题。
这就是我的问题：
当悬停的缩略图向下展开时，下方的缩略图将向右移动以避开它。这不是我想要的行为。我希望扩展的缩略图与下面的缩略图重叠，而不是推开。也就是说，我希望悬停的缩略图框向下展开，而不会导致任何其他缩略图移动。
这个是可能的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-24 09:41:30
你可以添加
.thumbtitle {
position:absolute;
}为了将它们从文档流中移除，以及
.thumb {
position:relative;
}相对于.thumb定位.thumbtitle。
通过这种方式，您还可以添加
.thumbtitle {
max-width:100%; /* or width:100% */
}最后，添加
.thumb:hover .thumbtitle {
z-index:1;
}以使其与以下元素重叠。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12557701
复制相关文章
相似问题
腾讯云开发者
