3

私はこのような構造を持っています:

<div class='row'>
    <div class='cell'>aaaa</div>
    <div class='cell'>bbbb</div>
    <div class='cell'>cccc</div>
</div>
<div class='row'>
    <div class='cell'>dddd</div>
    <div class='cell'>eeee</div>
    <div class='cell'>ffff</div>
</div>

関連するスタイル シート:

.cell {
    z-index: 1;
    position: relative;
    float: left;
    width: 82px;
}

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
}

row {
    clear: left;
    position: relative;
    z-index: 1;
}

カーソルの上の div のサイズを変更して、残りの div の構造を固定したままにします。ありがとう！

4

2 に答える 2

2

ホバーしたセル（100-82 = 18）に-18pxの負の右マージンを設定してみてください。

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
    margin-right: -18px;
}

実例

于 2012-09-18T10:48:26.757 に答える
2

のクラスを使用する必要がありますrow。

CSS のクラスを からrowに変更した場合.row:

ライブデモ

クラスは例で始める必要があります..anyname

クラス (HTML 内)はcss 内で<div class="james"></div>アクセスされます.james

ID (html)はCSS で<div id="james"></div>アクセスされます#james

于 2012-09-18T10:47:46.707 に答える