この記事では、Tailwind CSS の行グリッドにホバー効果を適用する方法を説明します。
Tailwind で行グリッドにホバーを適用するにはどうすればよいですか?
Tailwind の行グリッドにホバー効果を適用するには、HTML ファイルを作成し、「 ホバリング 「」のクラス グリッド行-<値> 」ユーティリティをHTMLプログラムに追加します。マウスを行グリッドの上に置くと、行数が変更されます。その後、Web HTML ページを表示し、グリッド項目の上にマウスを移動して変更を確認します。
実際の実装については、指定された手順を確認してください。
ステップ 1: HTML プログラムの行グリッドで Hover プロパティを使用する
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 ページを表示し、グリッド項目の上にマウスを移動します。
最初は 3 行あり、マウスをその上に置くと行数が 5 に変化していることがわかります。これは、ホバー効果が行グリッドに正常に適用されたことを示します。
結論
Tailwind の行グリッドにホバー効果を適用するには、「 ホバリング 「」のクラス グリッド行-<値> 」ユーティリティをHTMLプログラムに追加します。ホバー時の行数を変更します。変更を確実に行うには、Web HTML ページを表示し、グリッド項目の上にマウスを置きます。この記事では、Tailwind CSS の行グリッドにホバー効果を適用する方法を説明しました。