要素の上にカーソルを置き、そのフォントを太字に設定したときの揺れをどのように回避できますか? これが私が書いたコードのサンプルです：
揺れを避けるテクニックはありますか？LogOff にカーソルを合わせると、フォントは太字になりますが、テキストが太字になるため、そのテキスト行が少し右に移動します。ホバリングすると、再び揺れます。
このような揺れを避ける CSS の方法はありますか?
6635 次
7 に答える
5
ホバースタイルで非表示の重複テキストを作成することでこれを解決しました。display:none ではなく visibility:hidden を使用してスペースを取り、元のテキストの下に配置します。この非表示の要素は、テキストがホバー状態に十分な幅であることを確認します。
彼女は一例です
于 2010-09-28T16:06:34.957 に答える
2
いくつかのアイデア
- 簡単: 色 (または背景色) を変更するだけです。黒の代わりに color:#333 を設定し、ホバリング時: #000 - この方法ではテキスト サイズは変わりません。
- ボタン/テキストを変更したい場所でより高いインデックスを持つ小さな絶対配置
div固定サイズ（幅、高さ） 。のサイズが少し変化しても、隣人には影響しません。このソリューションには、いくつかのクロスブラウザー テストが必要です。div
于 2010-09-28T15:38:49.160 に答える
2
「シェイク」の意味がわかりません。ホバー時にテキストを太字にすると、ボタンが大きくなるという同じ問題に直面しました。ホバー時に太字を必要としないように、デザインを変更することで「解決」したと思います。@ ring0 の 2 番目の解決策はうまくいくかもしれませんが、実装するのは面倒です。彼の最初の提案を使用することをお勧めします。ホバー時に変化する背景画像 (おそらくグラデーション) を追加し、フォントの色を変更することもできます。
于 2010-09-28T15:46:07.487 に答える
1
ホバーに BOLD を使用することに決めた場合、この問題を回避することはできません。Bold フォントと Normal フォントは異なるフォントであるため、希望どおりに完全に揃えることはできず、このような視覚効果が見られます。それをサポートしているブラウザーを使用している場合は、text-shadow:ホバー時にスタイルを追加してみてください。color:グレーから黒に変えたり…
于 2010-09-28T16:10:10.507 に答える
1
シェイクとは、ヘルプまたはログオフの「ボックス」にカーソルを合わせたときに移動することを意味する場合、ログオフおよびヘルプ ボックスを太字のバージョンよりも大きくする必要があります。
于 2010-09-28T15:36:47.650 に答える
0
固定幅を設定できます。ただし、アイテムに強いスタイリングを使用しないことをお勧めします. また、単純に色を変更することもお勧めしません。これは、色盲のユーザーのアクセシビリティの問題に対処するものではないためです。単純に境界線を追加して背景を少し暗くすると、それでうまくいき、最も互換性のあるクロス ブラウザーになるはずです。
境界線を追加するだけでも同じ「揺れ動作」が得られることに注意してください。そのため、最初に既存の背景と一致するように境界線を追加してから、ホバー時に境界線の色を変更してください。
于 2010-09-28T16:19:17.417 に答える
0
私はこのようなことができると思った：
{ パディング:10px; }
a:hover { パディング:8px; font-weight:太字; }
元のfont-sizeとline-heightに応じて、同じpx値に設定されます
于 2010-11-26T23:00:35.813 に答える