0

G-mail や他のいくつかの Google サービスで Google スタイルのツールバーを再作成しようとしています。

ここに画像の説明を入力

フォーマットされたリストとネストされた div 要素の両方を 1 つのコンテナーに入れてみましたが、毎回同じ問題が発生します。

マウスオーバーすると、新しい 1px 境界線が他のすべての要素を移動し、次のようなものを適用する必要があります。

left: -1px;
bottom: 1px;

これは、現在 :hover されている要素にとってはすべてうまくいっていますが、残りはすべて動き回り、見苦しく見えます。

だから私の質問は次のとおりだと思います: :hover の新しい 1px が位置を変更しないように表示する方法はありますか?

明らかに、唯一の手段が絶対配置であり、ピクセル調整を行う必要がある場合は確かですが、よりエレガントな方法が必要です。

4

1 に答える 1

1

ホバー時に 1px の境界線が移動するのを避けるために、いくつかのことを行うことができます。

http://jsfiddle.net/ZeikJT/tBmm2/

1 つの解決策は、透明な境界線 ( border:1px solid transparent) を追加して、常に隙間ができるようにすることです。これはほとんどすべての状況で機能します。また、border-colorホバーを変更するだけで境界線の幅を再指定する必要がないため、幅を変更する場合に 2 つの場所を変更する必要はありません。

http://jsfiddle.net/ZeikJT/NkBwp/

別の解決策は、ホバー時に取り出されるマージンまたはパディングを追加することです。これを適切に機能させるには少しトリッキーですが、同様に機能します。

于 2012-12-04T17:33:42.493 に答える