5

左にフロートするように設定されたサムネイル（コンテナ要素）の行があります。サムネイルは、行に収まるように縮小されます。

<style type="text/css">
    .thumbnails{
        float:left;
        position:relative;
    }
    .thumbnails img{
        /* ... */
        width:65px;
        height:47px;
    }
</style>

ユーザーがサムネイルにカーソルを合わせると、サムネイルのポップアップが元のサイズで表示されます。

<style type="text/css">
    /* in addition to the above... */
    .th_selector:hover img{

        position:absolute;
        top:-30px;
        left:-30px;

        width:150px;
        height:113px;

        display:block;
        z-index:999;
    }
</style>

サムネイルの上にマウスを移動すると、画像の大きな画像が（意図したとおりに）表示されます。しかし、私には2つの問題があります。1）他のサムネイルが1つ左にジャンプします。それらはポップアップ画像の下に表示されます。これにより、ちらつきが発生することもあります（マウスポインタの位置によって異なります）。2）ウィンドウが小さすぎて、サムネイルが2行ある場合は、改行があります（これはあまり良くありません）。

サムネイルの元の位置を維持したまま、適切なホバー画像を使用してサムネイルの行を作成するにはどうすればよいですか？

4

1 に答える 1

9 
.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/

コード例では、この宣言によってドキュメントフローから要素が削除されるため、絶対位置を使用しないでください。これは基本的に、要素のページに「フットプリント」がないことを意味します。したがって、右側のサムネイルは、現在絶対に配置されている要素の下に効果的に折りたたまれています。

于 2013-02-12T18:08:07.587 に答える