このブログでは、以下のコンテンツ領域について説明します。
- Tailwind ホバー、フォーカス、およびアクティブ状態でテキスト装飾を適用する方法
- 「ホバー」状態で文字装飾を適用します。
- 「フォーカス」状態で文字装飾を適用します。
- 「アクティブ」状態でテキスト装飾を適用します。
Tailwind ホバー、フォーカス、およびアクティブ状態でテキスト装飾を適用する方法
テキストは「」で装飾できます。 テキスト装飾 ' 財産。このプロパティは、「 ホバリング '、' 集中 ' そして ' アクティブ 」を使用して、ユーザーのアクションに応じてテキストを装飾します。
例 1: 「ホバー」状態で文字装飾を適用する
この例では、「 テキスト装飾 」プロパティを使用して、デフォルトでは下線が引かれませんが、マウスホバー時に下線が引かれるようにします。
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >< / 頭 >
< 体 >
< テキストエリア クラス = 「下線なしのホバー:下線」 > これはTailwind CSSです < / テキストエリア >
< / 体 >
< / html >
これらのコード行に従って、「」内に CDN パスを指定します。 <頭> 」タグを使用して Tailwind 機能を利用します。次に、組み合わせた「」を適用します。 テキスト装飾 ” プロパティと” ホバリング 」要素にマウスを置くと下線が引かれるように記述されています。
出力
ご覧のとおり、「 <テキストエリア> マウスホバーが成功すると、要素に下線が付きます。
例 2: 「フォーカス」状態で文字装飾を適用する
次のコード ブロックは、「」を含めることによってテキストを装飾します。 集中 ' 州。これにより、要素が「 タブ ' 鍵：
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >< / 頭 >
< 体 >
< テキストエリア クラス = 「下線なしフォーカス:下線」 >これはTailwind CSSです< / テキストエリア >
< / 体 >
< / html >
このコードによると:
- 同様に、CDN パスを含めて「 <テキストエリア> ' 要素。
- その後は「」を活用してください。 テキスト装飾 」プロパティを使用すると、デフォルトでテキストに下線が引かれなくなります。
- 関連する「 集中 ” 状態では、要素がフォーカスされるとテキストに下線が引かれます。
出力
この結果は、「」ボタンを押すと、要素に含まれるテキストに下線が引かれることを意味します。 タブ ” キー、つまり要素にフォーカスを当てます。
例 3: 「アクティブ」状態でテキスト装飾を適用する
この例では、テキストを次のように装飾できます。 ラインスルー ” プロパティは、要素がアクティブになったときに適用されます。
< html >
< 頭 >
< メタ 文字コード = 「utf-8」 >
< メタ 名前 = 「ビューポート」 コンテンツ = 'width=デバイス幅、初期スケール=1' >
< 脚本 送信元 = 「https://cdn.tailwindcss.com」 >< / 脚本 >< / 頭 >
< 体 >
< テキストエリア クラス = 「下線なしアクティブ:ラインスルー」 >これはTailwind CSSです< / テキストエリア >
< / 体 >
< / html >
このコード スニペットでは、以下の手順を適用します。
- CDN パスと「 <テキストエリア> ' 要素。
- 次に、文字装飾を適用します。 下線なし ” プロパティをデフォルトで割り当て、” アクティブ 「」の状態 ラインスルー ”。
- これにより、要素がアクティブになると、含まれるテキストに線が描画されます。
出力
この出力から、テキストが適用された状態に応じて適切に装飾されていることが確認できます。
結論
テキストは「」で装飾できます。 テキスト装飾 ' 財産。このプロパティは「」で適用できます。 ホバリング '、' 集中 ' そして ' アクティブ 」修飾子は、それぞれマウスホバー時、要素がフォーカスされているとき、または要素がアクティブになったときにテキストを装飾することを示します。