この記事では、Tailwind CSS の列グリッドにホバー効果を適用する方法を説明します。
Tailwind で柱グリッドにホバーを適用するにはどうすればよいですか?
Tailwind の柱グリッドにホバー効果を適用するには、HTML ファイルを作成し、「 ホバリング 「」のクラス グリッド列-<値> 」ユーティリティをHTMLプログラムに追加します。マウスを列グリッドの上に置くと、列の数が変更されます。次に、Web HTML ページを表示し、グリッド項目の上にマウスを移動して変更を確認します。
実際に実装するには、以下の手順に従います。
ステップ 1: HTML プログラムの列グリッドでホバー プロパティを使用する
HTMLプログラムを作成し、「 ホバリング ” プロパティと” グリッド列-<値> ' 効用。たとえば、「」を使用しました。 ホバー:グリッド列-5 」プロパティを使用して、ホバー時の列数を変更します。
< 体 >
< ディビジョン クラス = 「グリッド グリッド-列-3 ホバー:グリッド-列-5 ギャップ-3 m-3 テキスト-センター」 >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 1 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 2 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 3 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 4 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 5 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 6 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 7 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 8 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 9 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 10 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここで、親の
- 「 グリッド ” クラスを使用してグリッド レイアウトを作成します。
- 「 グリッド列-3 ” クラスは、グリッドに同じサイズの列が 3 つある必要があることを指定します。
- 「 ホバー:グリッド列-5 ” クラスは、グリッド上にマウスを置くと、グリッドが 5 つの同じサイズの列に変更されるように指定します。
- 「 ギャップ-3 ” クラスは、各グリッド項目間に 3 単位の間隔を設定します。
- 「 m-3 ” クラスは、グリッド コンテナーの周囲に 3 単位のマージンを適用します。
- 「 テキストセンター ” クラスは、各グリッド項目のテキストを中央に設定します。
子の
- 「 ”はグリッドの項目数を表します。
- 「 bg-ティール-500 」クラスは、グリッド項目の背景にティール色を設定します。
- 「 p-5 ” クラスは、子の
項目内のコンテンツに 5 単位のパディングを追加します。ステップ 2: 出力を確認する
ホバー効果が柱グリッドに適用されていることを確認するには、Web ページを表示し、マウスをグリッド項目の上に移動します。
マウスをグリッド項目の上に置くと、列の数が変化することがわかります。これは、ホバー効果が柱グリッドに正常に適用されたことを示します。
結論
Tailwind の列グリッドにホバー効果を適用するには、「 ホバリング 「」のクラス グリッド列-<値> 」ユーティリティをHTMLプログラムに追加します。ホバー時の列の数を変更します。変更を確実に行うには、Web HTML ページを表示し、グリッド項目の上にマウスを置きます。この記事では、Tailwind CSS の列グリッドにホバー効果を適用する方法を説明しました。