Kako uporabiti 'break-inside' na Hover in Tailwind?

Ta članek bo ponazoril metodo za uporabo »vdora« pri lebdenju v Tailwind CSS.

Kako uporabiti 'break-inside' na Hover in Tailwind?

Če želite uporabiti »vdor« pri lebdenju v Tailwindu, uporabite lastnost »lebdenje« s posebnim pripomočkom »vdor« na želenih elementih v programu HTML. Nato si oglejte spletno stran za preverjanje.

Za praktično predstavitev preizkusite spodaj navedene korake:

1. korak: Uporabite lastnost Hover s pripomočkom »break-inside«.
Ustvarite program HTML in uporabite » lebdeti ” nepremičnine z želeno uporabnostjo za “vdor”. Na primer, uporabili smo lastnost lebdenja z ' zlom-noter-izogniti-stolpec ”, da se izognete prelomu stolpca znotraj elementa

ob premikanju miške:

Tukaj:

• “ stolpci-2 ” se uporablja za razdelitev
  v dva stolpca.
• “ bg-rumena-500 ” nastavi rumeno barvo za ozadje
  .
• “ hover:break-inside-avoid-column ” v elementu

  nakazuje, da se je treba v elementu

  izogibati prelomu stolpca, ko se miškin kazalec premakne nad.

2. korak: Preverite izhod
Če želite preveriti, ali je bil pripomoček »break-inside-avoid-column« uspešno uporabljen pri lebdenju, si oglejte spletno stran HTML:

Zgornji rezultat kaže, da se je izognil prelomu stolpca znotraj elementa, ko je uporabnik premaknil miškin kazalec nad želeni element. To pomeni, da je bil 'break-inside-avoid-column' uspešno uporabljen za element pri premikanju, v skladu s katerim je bil določen.

Zaključek

Če želite uporabiti »vdor« pri lebdenju v Tailwindu, uporabite » lebdeti “ nepremičnina z želeno “ vlom v notranjost ” v programu HTML. Lastnost lebdenja lahko uporabite s katerim koli elementom. Za preverjanje si oglejte spletno stran. V tem članku je razložena metoda za uporabo »vdora« pri lebdenju v Tailwind CSS.