Šajā rakstā tiks parādīta metode, kā lietot kursora novietošanas efektu rindu režģī programmā Tailwind CSS.
Kā Tailwind režīmā lietot kursoru uz rindu režģa?
Lai lietotu kursora novietošanas efektu rindu režģī programmā Tailwind, izveidojiet HTML failu un izmantojiet “ novietojiet kursoru 'klase ar ' grid-rows-
Apskatiet sniegtos soļus 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 ' grid-rows-
< ķermeni >
< div klasē = 'grid grid-rows-3 hover: grid-rows-5 grid-flow-col gap-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 klasē = 'bg-teal-500 p-5' > 7 < / div >
< div klasē = 'bg-teal-500 p-5' > 8 < / div >
< div klasē = 'bg-teal-500 p-5' > 9 < / div >
< div klasē = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / ķermeni >
Šeit, vecākelementā
- ' režģis ” klase tiek izmantota, lai izveidotu režģa izkārtojumu.
- ' režģis-rindas-3 ” klase norāda, ka režģī jābūt 3 vienāda izmēra rindām.
- ' kursors: režģis-rindas-5 ” klase maina režģi 5 vienāda lieluma rindās, kad pele atrodas virs tā.
- ' grid-flow-col ” klase ievieto režģa elementus horizontāli kolonnās.
- ' sprauga-3 ” klase nosaka 3 vienību atstarpi starp katru režģa vienumu.
- ' m-3 ” klase piemēro 3 vienību rezervi ap režģa konteineru.
- ' teksta centrs ” klase iestata katra režģa vienuma tekstu centrā.
Bērnu
- ' ” apzīmē režģa vienumu skaitu.
- ' bg-teal-500 ” klase iestata zilganzaļo krāsu uz režģa elementu fona.
- ' p-5 ” klase pievieno 5 vienību pildījumu saturam, kas atrodas bērnu
vienumu iekšpusē.2. darbība: pārbaudiet izvadi
Lai pārbaudītu, vai rindu režģī ir lietots kursora novietošanas efekts, skatiet tīmekļa lapu un pārvietojiet peles kursoru virs režģa vienumiem:
Var novērot, ka sākotnēji ir 3 rindas un, peles kursoru virzot virs tām, rindu skaits ir mainījies uz 5. Tas norāda, ka rindu režģī ir veiksmīgi pielietots hover efekts.
Secinājums
Lai lietotu kursora novietošanas efektu rindu režģī programmā Tailwind, izmantojiet “ novietojiet kursoru 'klase ar ' grid-rows-
” utilīta HTML programmā. Tas maina rindu skaitu, novietojot kursoru. Lai nodrošinātu izmaiņas, skatiet tīmekļa HTML lapu un virziet peles kursoru uz režģa vienumiem. Šajā rakstā ir ilustrēta metode, kā lietot kursora novietošanas efektu rindu režģī programmā Tailwind CSS.