Šajā rakstā tiks parādīta metode, kā Tailwind CSS lietotnē “iekļūšana iekšā”, virzot kursoru.
Kā lietot “iekļūšanu iekšā” uz Hover in Tailwind?
Lai lietotu “break-inside” kursora novietošanai programmā Tailwind, izmantojiet rekvizītu “hover” ar konkrēto “break-inside” utilītu vēlamajiem elementiem HTML programmā. Pēc tam apskatiet tīmekļa lapu, lai to pārbaudītu.
Lai iegūtu praktisku demonstrāciju, izmēģiniet tālāk norādītās darbības.
1. darbība. Izmantojiet kursora rekvizītu ar utilītu “iekļūšana iekšā”.
Izveidojiet HTML programmu un izmantojiet ' novietojiet kursoru ” īpašumu ar vēlamo “iekļūšanas” lietderību. Piemēram, mēs esam izmantojuši hover rekvizītu ar “ lauzt iekšā-izvairīties-kolonna ” utilīta, lai izvairītos no kolonnas pārtraukuma elementā
, novietojot kursoru:
< ķermenis >
< div klasē = 'columns-2 bg-yellow-500' >
< lpp > Sveiki. Laipni lūgti šeit.... < / lpp >
< lpp klasē = 'hover:break-inside-avoid-column' >
Izmantojiet ielaušanās utilītas, lai kontrolētu, kā a
lapas vai kolonnas pārtraukumam ir jādarbojas elementā... < / lpp >
< lpp > Uzziniet par Tailwind CSS... < / lpp >
< lpp > Čau... < / lpp >
< / div >
< / ķermenis >
Šeit:
- ' kolonnas-2 ” klase tiek izmantota, lai sadalītu divās kolonnās.
- ' bg-yellow-500 ” klase iestata dzelteno krāsu
fonam.- ' kursors: pārtraukums-iekšā-izvairās-kolonna ” klase elementā
norāda, ka tad, kad peles kursors atrodas virs, elementā
ir jāizvairās no kolonnas pārtraukuma.
2. darbība: pārbaudiet izvadi
Lai pārbaudītu, vai utilīta “break-inside-avoid-column” ir veiksmīgi lietota, virzot kursoru, skatiet HTML tīmekļa lapu:
Iepriekš redzamā izvade parāda, ka lietotājam virzot kursoru virs vēlamā elementa, ir novērsts kolonnas pārtraukums elementā. Tas norāda, ka kolonna “break-inside-aid-colum” ir veiksmīgi lietota elementam, kas virza kursoru, saskaņā ar kuru tas tika norādīts.
Secinājums
Lai lietotu “iekļūšanu iekšā”, virzot kursoru Tailwind režīmā, izmantojiet “ novietojiet kursoru 'īpašums ar vēlamo' ielaušanās iekšā ” utilīta HTML programmā. Lidmašīnas īpašību var izmantot ar jebkuru elementu. Lai pārbaudītu, skatiet tīmekļa lapu. Šajā rakstā ir izskaidrota metode, kā Tailwind CSS lietotnē “iekļūšana iekšā”, virzot kursoru.
- ' bg-yellow-500 ” klase iestata dzelteno krāsu