1

マウスオーバーで太字のテキストに変形するテキストを作成しようとしています。

これを達成するために、目に見えない太字のテキストを作成し（コンテナに正しい幅を与えて、マウスオーバーでテキストの重みが変わったときにジャンプしないようにするため）、:before疑似要素のみをアニメーション化しfont-weight: 200;ていfont-weight: 700;ます。

デモ: http://jsfiddle.net/ky55D/

テキストを有効にしたデモ: http://jsfiddle.net/ky55D/1/ (何らかの理由で の有無にかかわらず一致しません:hover)。

問題は、私の例の 2 番目の単語 "Gravida" が、親の上に配置されるのではなく、次の行に移動することです。より高く追加widthすると.link:before役立ちますが、適切な幅がどうなるかわかりません。200%2ワードで機能します。300%3単語などで機能します。

ここに画像の説明を入力

これを CSS だけで修正できる場合、何かアイデアはありますか?

4

1 に答える 1

2

KISSパラダイムに従って、アプローチを変更します:)

  • transparent text-shadow通常の状態で使用してください。

  • 着色した:hover状態にします。

テキストは太く表示されますが、全体の幅は変更されず、単語も移動されません。

デモ: http://jsfiddle.net/tQd6g/1/

編集:要素にも追加display: inline-block;します。これは、表示されたオブジェクトとして機能するようになったためです。これは、目的のために必要なものではない可能性があります。ainline

デモ: http://jsfiddle.net/ky55D/2/

于 2013-09-09T09:45:18.137 に答える