この記事では、Tailwind でボックス装飾付きホバーを適用する手順を説明します。
追い風時のボックス装飾ブレイクにホバーを適用するにはどうすればよいですか?
「box-decoration-break」CSS プロパティは、要素が複数の行または列にまたがる場合の背景、境界線、パディングのレンダリングを決定します。ボックス装飾ブレーク要素にホバー効果を適用するには、「」を使用する必要があります。 ホバリング ” プロパティを使用して要素に効果を適用します。
実際のデモンストレーションについては、以下の手順を確認してください。
ステップ 1: HTML プログラムのボックス装飾ブレークでホバー プロパティを使用する
HTML プログラムを作成し、ボックス装飾ブレーク要素のホバー プロパティを利用します。たとえば、「」を適用しました。 ホバー:ボックス装飾クローン 「boxdecoration-slice」要素の「」プロパティと「 ホバー:テキスト-イエロー-500 「box-decoration-clone」要素の「」プロパティ:
< 体 >
< スパン クラス = 「box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2」 >
Linux < br / >
ヒント
< / スパン >
< br >
< br >
< スパン クラス = 「box-decoration-clone hover:text- yellow-500 bg-teal-600 text-white text-3xl px-2」 >
Linux < br / >
ヒント
< / スパン >
< / 体 >
ここ：
- ” ホバー:ボックス装飾クローン 」は、「boxdecoration-slice」要素をマウスオーバーしたときに「box-decoration-clone」効果を適用します。
- ” ホバー:テキスト-イエロー-500 」は、「box-decoration-clone」要素にマウスを置くと文字の色が黄色に変わります。
ステップ 2: 出力を確認する
HTML プログラムを実行して出力を確認します。
上記の出力は、指定に従ってホバー効果が要素に適用されたことを示しています。
結論
Tailwind CSS は、ホバー効果を任意の要素に適用するためのユーティリティ クラスのコレクションを提供します。ボックス装飾ブレーク要素にホバーを適用するには、「 ホバリング ”プロパティを使用してHTMLプログラム内で効果を指定します。ユーザーは、背景色、テキストの色、境界線の色を変更したり、ホバー時に要素に影を追加したりできます。この記事ではTailwindでホバーにボックス装飾を適用する手順を説明しました。