In diesem Artikel wird die Methode zum Anwenden von „Break-inside“ beim Hover in Tailwind CSS erläutert.
Wie wende ich „Break-Inside“ beim Schweben bei Rückenwind an?
Um den „Break-inside“ beim Hover in Tailwind anzuwenden, verwenden Sie die „hover“-Eigenschaft mit dem spezifischen „Break-inside“-Dienstprogramm für die gewünschten Elemente im HTML-Programm. Sehen Sie sich dann die Webseite zur Überprüfung an.
Probieren Sie für eine praktische Demonstration die unten aufgeführten Schritte aus:
Schritt 1: Verwenden Sie die Hover-Eigenschaft mit dem Dienstprogramm „break-inside“.
Erstellen Sie ein HTML-Programm und nutzen Sie die Funktion „ schweben ”-Eigenschaft mit dem gewünschten „Break-Inside“-Dienstprogramm. Zum Beispiel haben wir die Hover-Eigenschaft mit dem „ break-inside-avoid-column ”-Dienstprogramm, um einen Spaltenumbruch innerhalb des
-Elements beim Schweben zu vermeiden:
< Körper >
< div Klasse = „Spalten-2 bg-gelb-500“ >
< P > Hallo. Willkommen hier.... < / P >
< P Klasse = „hover:break-inside-avoid-column“ >
Verwenden Sie die Break-In-Dienstprogramme, um zu steuern, wie a
Seiten- oder Spaltenumbrüche sollten sich innerhalb eines Elements verhalten ... < / P >
< P > Erfahren Sie mehr über Tailwind CSS... < / P >
< P > Tschüss... < / P >
< / div >
< / Körper >
Hier:
- „ Spalten-2 Die Klasse „wird verwendet, um das in zwei Spalten zu unterteilen.
- „ bg-gelb-500 ”-Klasse legt die gelbe Farbe auf den Hintergrund des
fest.- „ hover:break-inside-avoid-column Die Klasse „im
-Element gibt an, dass beim Bewegen des Mauszeigers darüber der Spaltenumbruch innerhalb des
-Elements vermieden werden soll.
Schritt 2: Ausgabe überprüfen
Um zu überprüfen, ob das Dienstprogramm „break-inside-avoid-column“ beim Hover erfolgreich angewendet wurde, sehen Sie sich die HTML-Webseite an:
Die obige Ausgabe zeigt, dass der Spaltenumbruch innerhalb des Elements vermieden wurde, wenn der Benutzer mit der Maus über das gewünschte Element fuhr. Dies zeigt an, dass „break-inside-avoid-column“ beim Schweben erfolgreich auf das Element angewendet wurde, gemäß dem es angegeben wurde.
Abschluss
Um den „Einbruch nach innen“ beim Schweben in Rückenwind anzuwenden, verwenden Sie die Option „ schweben „Immobilie mit dem gewünschten“ Einbruch ”-Dienstprogramm im HTML-Programm. Die Hover-Eigenschaft kann mit jedem Element verwendet werden. Zur Überprüfung sehen Sie sich die Webseite an. In diesem Artikel wurde die Methode zum Anwenden von „Break-Inside“ beim Hover in Tailwind CSS erläutert.
- „ bg-gelb-500 ”-Klasse legt die gelbe Farbe auf den Hintergrund des