Šajā rakstā tiks parādīta metode, kā lietot kursora novietošanas efektu režģa automātiskās plūsmas utilītprogrammā Tailwind CSS.
Kā lietot kursoru uz režģa automātiskās plūsmas aizmugurējā vējā?
Lai lietotu kursora novietošanas efektu režģa automātiskajai plūsmai programmā Tailwind, izveidojiet HTML failu un izmantojiet “ novietojiet kursoru 'klase ar ' grid-flow-
Apskatiet sniegtos soļus tās praktiskai īstenošanai:
1. darbība. Izmantojiet kursora rekvizītu ar rindu režģi HTML programmā
Izveidojiet HTML programmu un izmantojiet ' novietojiet kursoru 'īpašums ar vēlamo' grid-flow-
< ķermeni >
< div klasē = 'grid grid-flow-col hover: grid-flow-row-row-row-3 m-3 text-center' >
< div klasē = 'bg-teal-500 p-5' > 1 < / div >
< div klasē = 'bg-teal-500 p-5' > 2 < / div >
< div klasē = 'bg-teal-500 p-5' > 3 < / div >
< div klasē = 'bg-teal-500 p-5' > 4 < / div >
< div klasē = 'bg-teal-500 p-5' > 5 < / div >
< div klasē = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / ķermeni >
Šeit:
- ' režģis ” klase iestata elementu kā režģa konteineru.
- ' grid-flow-col ” definē režģa vienumu plūsmu kolonnās.
- ' hover:grid-flow-row ” klase maina režģa vienumu plūsmu uz rindām, kad pele atrodas virs konteinera.
- ' sprauga-3 ” pievieno 3 vienību atstarpi starp režģa vienumiem.
- ' m-3 ” pievieno 3 vienību rezervi ap režģa konteineru.
- ' teksta centrs ” izlīdzina teksta saturu režģa vienumu iekšpusē līdz centram.
2. darbība: pārbaudiet izvadi
Lai pārbaudītu, vai kursora novietošanas efekts ir piemērots režģa automātiskajai plūsmai, skatiet tīmekļa lapu un pārvietojiet peles kursoru virs režģa vienumiem:
Var novērot, ka sākotnēji režģa elementu plūsma ir kolonnās un, pelei virzot virs tiem, plūsma tiek mainīta uz rindām. Tas norāda, ka kursora novietošanas efekts ir veiksmīgi piemērots režģa automātiskajai plūsmai.
Secinājums
Lai lietotu kursora novietošanas efektu režģa automātiskajai plūsmai Tailwind režīmā, izmantojiet “ novietojiet kursoru 'klase ar vēlamo' grid-flow-