Jak použít „break-inside“ na Hover v Tailwindu?

Tento článek bude příkladem metody použití „break-inside“ při umístění kurzoru v Tailwind CSS.

Jak použít „break-inside“ na Hover v Tailwindu?

Chcete-li použít „break-inside“ při umístění kurzoru v Tailwindu, použijte vlastnost „hover“ se specifickým nástrojem „break-inside“ na požadované prvky v programu HTML. Poté si zobrazte webovou stránku pro ověření.

Pro praktickou ukázku vyzkoušejte níže uvedené kroky:

Krok 1: Použijte vlastnost Hover pomocí nástroje „break-inside“.
Vytvořte HTML program a použijte „ vznášet se ” vlastnost s požadovaným nástrojem „break-inside“. Například jsme použili vlastnost hover s „ break-inside-varoid-column ” pro zamezení zalomení sloupce v prvku

při najetí myší:

Tady:

• “ sloupce-2 Třída ” se používá k rozdělení
  do dvou sloupců.
• “ bg-žlutá-500 Třída ” nastaví žlutou barvu na pozadí prvku
  .
• “ hover:break-inside-varoid-column ” v elementu

  označuje, že když ukazatel myši najede nad ním, je třeba se v elementu

  vyhnout zalomení sloupce.

Krok 2: Ověřte výstup
Chcete-li ověřit, zda byl nástroj „break-inside-avoid-column“ při umístění kurzoru úspěšně aplikován, zobrazte webovou stránku HTML:

Výše uvedený výstup ukazuje, že když uživatel najede kurzorem na požadovaný prvek, zamezí se přerušení sloupce v prvku. To znamená, že sloupec „break-inside-aoid-column“ byl úspěšně aplikován na prvek při umístění kurzoru, podle kterého byl specifikován.

Závěr

Chcete-li použít „break-inside“ při umístění kurzoru v Tailwindu, použijte „ vznášet se 'vlastnost s požadovaným' vloupání dovnitř ” v programu HTML. Vlastnost hover může být použita s jakýmkoli prvkem. Pro ověření si prohlédněte webovou stránku. Tento článek vysvětluje způsob použití „break-inside“ při umístění kurzoru v Tailwind CSS.