2

タグ内のボックスであるスパンがたくさんありcenter、ユーザーがその上にカーソルを置いたときに各ボックスがその場で拡大するようにします。これは、他のすべての要素を一緒にシフトし、見栄えが悪いため、機能しません。

.square:hover {
    background-color: yellow;
    width: 50px; // originally 25px
    height: 50px;// originally 25px
}

隣人をすべて押しのけることなく成長させるにはどうすればよいでしょうか?

4

3 に答える 3

1

.square を同じサイズの相対的な位置のコンテナーにラップし、次に .square を絶対に配置します。

.squareContainer { 
    position:relative; 
    width: 25px; 
    height: 25px;
}
.square:hover { 
    position:absolute; 
    width: 50px; 
    height: 50px;
}

このように、.square がフローから削除されても、他の要素には影響しません。編集

.square を絶対値に設定しても機能しないようです
が、両方を相対値に設定すると機能します

フィドル

http://jsfiddle.net/ur4aT/10/

于 2012-06-29T03:26:27.547 に答える
1

絶対.square位置を指定し、コンテナに対して相対的に配置します...

.square { 
    position:absolute; /* moves the element out of normal flow */
}

.square:hover {
    background-color: yellow;
    width: 50px; // originally 25px
    height: 50px;// originally 25px
}

配置は要素の左上隅に基づいているため、疑似セレクターのtopおよびleftプロパティを変更する必要がある場合もあります。:hover

.square { top:50px; left:50px; }

.square:hover {
    /* ... definitions ... */

    top:25px;
    left:25px;
}
于 2012-06-29T03:16:43.567 に答える
0

裏技を使った

  1. 外側divの位置を に設定して、inline-blockそれらを水平に揃えます (必要ありません)。
  2. 外側の幅と高さを設定しますdiv(必須)
  3. %内側にベース ディメンションを使用しdivます (好きなものを選択してください。その方法で作業するのは簡単です)。
  4. 内側の div:hover状態で、そのディメンションに%基づいて再度設定しmargin、その a/c を式に設定しますmargin = (100-width)/2

デモ @jsFiddle をチェックしてください: http://jsfiddle.net/dxb28/、

幸運を祈ります:)<

于 2012-06-29T04:01:44.030 に答える