0

サムネイル画像のギャラリーがあります。各画像の下に、サムネイルのタイトルを表示します。

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

サムタイトルは、1 行に収まるように短縮されています。

.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 行に収まらない場合は、ホバーされたサムネール ボックスが下方向に拡張され、完全なタイトルが表示されます。

これが私の問題です：

ホバーしたサムネイルが下に拡大すると、下のサムネイルが右に移動して邪魔になりません。これは私が望む動作ではありません。下のサムネイルを押しのけるのではなく、拡大したサムネイルを重ねて表示したいと思います。つまり、他のサムネイルを移動させずに、ホバーしたサムネイル ボックスを下に展開したいのです。

これは可能ですか？

4

1 に答える 1

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/

于 2012-09-24T01:41:30.427 に答える