2

WORD や REALLYLONGWORD などの単語があります。どちらもフォントが薄いので、マウスオーバーで太字にしたいです。両方がありfloat: left; width: auto;ます。それらに固定幅を与えることはできません。

問題は、WORD をホバーすると、WORD のフォントが太くなる (そして幅の値が大きくなる) ため、REALLYLONGWORD が右にジャンプすることです。それに対するCSSのみの回避策はありますか？

編集（私は自分の質問に答えることができないので、以下に回答を投稿しています）：CSSのみの解決策を見つけました。HTML:

<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>

CSS:

.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; } 
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; } 
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }

基本的に、BOLD フォントの隠しコンテナをもう 1 つ作成し (その幅はメインの幅)、その中に LIGHT フォントを配置します。ホバー後も BOLD ワードの幅があるため、ジャンプはありません。

4

3 に答える 3

0

これはずっと前に尋ねられたことは知っていますが、うまく機能するジャンプを修正する解決策を思いついたので、共有したいと思いました。

ホバー時にフォントを太字にする代わりに、テキストの影を付けます。ジャンプなし、同じ効果、1 行の CSS。

于 2015-08-31T20:52:24.080 に答える
0

文字間隔を使用します。例えば{letter-spacing:0.04em}

太字の場合は同じ単語と同じ全体幅になるように十分な文字間隔で WORD のスタイルを設定し、太字の場合は文字間隔を削除すると、他のすべてがそのまま残ります。

動作します - これを試してください (これは概念をデモするだけです - 私が本番環境に推奨しているものではありません):

<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>
于 2012-04-06T12:08:34.850 に答える
0

フォントに幅をまったく追加したくない場合は、 width プロパティを完全に削除することをお勧めします。（また、css の書き込みエラーに気付いていただければ幸いです。幅が必要です）

次は ahref にクラスを割り当てます。これは SPAN タグで簡単に行うことができます。

css で行ったら、次のようにします: .firstlinkclass{ font-weight: bold; }

于 2012-04-06T12:13:03.230 に答える