Question

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

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

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

这是我的问题：

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

这可能吗？

Answer 1

你可以添加

.thumbtitle {
    position:absolute;
}

以便从文档流中删除它们，

.thumb {
    position:relative;
}

将.thumbtitle相对于.thumb定位。

这样你也可以添加

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

最后，添加

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

使其与以下元素重叠。

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

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

1 个答案: