0

前

ロールオーバー時

そしてここにcssがあります：

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}
.divPhoto:hover {
    border:1px solid #0000FF;
    background-color:#CCC;
    cursor:pointer;
    height:175px;
}



foreach($photos as $photo) { ?>

    <div class="divPhoto" >
        <a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
        <input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
    </div> 


<? } ?>

ホバーを上ではなく下に揃えるアイデアはありますか？imahe をホバリングすると、すべての画像が移動するようになったため

4

4 に答える 4

1

vertical-align:topルールへのA.divPhotoで十分なはずです。

于 2013-10-07T21:24:28.850 に答える
0

ホバー時の高さを 140px から 175px に変更するため、ホバーしていない状態で 175px の高さにパディングするには、追加の margin-bottom が必要です。

于 2013-10-07T21:18:42.967 に答える
0

divに使用display:inline-table;する必要があります.divPhoto

フィドル

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-table;  /* <= this line */
    margin:10px;
    transition:0.5s;
    overflow:hidden;
}
于 2013-10-07T21:21:08.057 に答える
0

要素はインラインブロックであるため、次のように簡単に使用できますvertical-align: top。

.divPhoto {
    border:1px solid #999;
    width:140px;
    height:140px;
    border-radius:3px;
    background-color:#EEE;
    display:inline-block;
    margin:10px;
    transition:0.5s;
    overflow:hidden;
    vertical-align: top;
}

http://jsfiddle.net/Dtejn/

于 2013-10-07T21:24:51.340 に答える