この記事では、Tailwind CSS でホバー時に「ブレークインサイド」を適用する方法を例に説明します。
Tailwind でホバーに「ブレークインサイド」を適用するにはどうすればよいですか?
Tailwind でホバー時に「ブレークインサイド」を適用するには、HTML プログラム内の目的の要素で特定の「ブレークインサイド」ユーティリティで「hover」プロパティを使用します。次に、Web ページを表示して確認します。
実際のデモンストレーションについては、以下の手順を試してください。
ステップ 1: 「break-inside」ユーティリティでホバー プロパティを使用する
HTMLプログラムを作成し、「 ホバリング 」プロパティに、目的の「侵入」ユーティリティを追加します。たとえば、hover プロパティを「」で使用しました。 列内侵入回避 」 ホバー時の
要素内の列の区切りを回避するユーティリティ:
< 体 >
< ディビジョン クラス = 「columns-2 bg- yellow-500」 >
< p > こんにちは。ようこそ.... < / p >
< p クラス = 「hover:break-inside-avoid-column」 >
ブレークインサイド ユーティリティを使用して、
ページまたは段区切りは要素内で動作する必要があります... < / p >
< p > Tailwind CSS について学ぶ... < / p >
< p > さよなら... < / p >
< / ディビジョン >
< / 体 >
ここ：
- 「 列-2 ” クラスを利用して、を 2 つの列に分割します。
- 「 BG-イエロー-500 ”クラスは、
の背景に黄色を設定します。- 「 hover:列内での回避列を破る
要素内の ” クラスは、マウス ポインターが上に置かれたときに、
要素内で列の区切りを避ける必要があることを示します。
ステップ 2: 出力を確認する
ホバー時に「break-inside-avoid-column」ユーティリティが正常に適用されたかどうかを確認するには、HTML Web ページを表示します。
上記の出力は、ユーザーが目的の要素の上にマウスを移動したときに、要素内の列の区切りが回避されたことを示しています。これは、「break-inside-avoid-column」が指定に従ってホバー上の要素に正常に適用されたことを示します。
結論
Tailwind でホバー時に「ブレークインサイド」を適用するには、「 ホバリング 「ご希望の物件」 侵入 」ユーティリティをHTMLプログラムに追加します。 hover プロパティはどの要素でも利用できます。確認するには、Web ページをご覧ください。この記事ではTailwind CSSでホバー時に「ブレークインサイド」を適用する方法を解説しました。
- 「 BG-イエロー-500 ”クラスは、