浮动缩略图库，悬停时有额外的缩略图内容。如何允许悬停的缩略图与邻居重叠？答案

【问题标题】：floated thumbnail gallery, with extra thumbnail content on hover. How to allow hovered thumbnail to overlap neighbors?浮动缩略图库，悬停时有额外的缩略图内容。如何允许悬停的缩略图与邻居重叠？
【发布时间】：2012-09-15 11:31:23
【问题描述】：

我有一个缩略图库。在每张图片下方，我显示缩略图标题：

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

如果完整的缩略图不适合一行，则悬停的缩略图框会向下扩展以容纳完整的标题。

这是我的问题：

当悬停的缩略图向下展开时，下方的缩略图会向右移动以避开它。这不是我想要的行为。我希望扩展的缩略图与下面的缩略图重叠，而不是推开。也就是说，我希望悬停的缩略图框向下扩展，而不会导致任何其他缩略图移动。

这可能吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

你可以添加

.thumbtitle {
    position:absolute;
}

为了将它们从文档流中删除，并且

.thumb {
    position:relative;
}

相对于.thumb定位.thumbtitle。

这样你也可以添加

.thumbtitle {
    max-width:100%; /* or width:100% */
}

最后，添加

.thumb:hover .thumbtitle {
    z-index:1;
}

使其与以下元素重叠。

演示：http://jsfiddle.net/ANvvR/

【讨论】：

完美。正是我需要的。谢谢！！