See artikkel demonstreerib meetodit hõljutusefekti rakendamiseks Tailwind CSS-i ridaruudustikule.
Kuidas rakendada hõljukit rearuudustikul Tailwindis?
Hõljutusefekti rakendamiseks Tailwindis rearuudustikule looge HTML-fail ja kasutage ' hõljuma ' klass koos ' grid-rows-
Tutvuge etteantud sammudega praktiliseks rakendamiseks:
1. toiming: kasutage hõljukatribuuti HTML-programmis rearuudustikuga
Looge HTML-programm ja kasutage ' hõljuma ' kinnisvara koos ' grid-rows-
< keha >
< div klass = 'grid grid-rows-3 hover: grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klass = 'bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'bg-teal-500 p-5' > 6 < / div >
< div klass = 'bg-teal-500 p-5' > 7 < / div >
< div klass = 'bg-teal-500 p-5' > 8 < / div >
< div klass = 'bg-teal-500 p-5' > 9 < / div >
< div klass = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / keha >
Siin, emaelemendis
- “ võre ” klassi kasutatakse ruudustikupaigutuse loomiseks.
- “ ruudustik-read-3 ” klass täpsustab, et ruudustikus peaks olema 3 võrdse suurusega rida.
- “ hover:grid-rows-5 ” klass muudab ruudustiku viieks võrdse suurusega reaks, kui hiir selle kohal hõljub.
- “ grid-flow-col ” klass paigutab ruudustiku üksused horisontaalselt veergudesse.
- “ vahe-3 ” klass määrab iga ruudustiku elemendi vahele 3 ühikut.
- “ m-3 ” klass rakendab võrgukonteineri ümber 3 ühiku suurust varu.
- “ tekstikeskus ” klass seab iga ruudustiku elemendi teksti keskele.
Alamelementides
- “ ” tähistab ruudustiku üksuste arvu.
- “ bg-teal-500 ” klass määrab sinakaspruuni värvi ruudustikuelementide taustale.
- “ p-5 ” klass lisab alamüksuste
sisule 5-ühikulise täidise.2. samm: kontrollige väljundit
Kontrollimaks, kas hõljutusefekt on rearuudustikule rakendatud, vaadake veebilehte ja liigutage kursorit ruudustiku üksuste kohal.
On märgata, et esialgu on rida 3 ja kui hiir hõljutab selle kohal, on ridade arv muutunud 5-ks. See näitab, et hõljumise efekt on rearuudustikul edukalt rakendatud.
Järeldus
Hõljutusefekti rakendamiseks Tailwindis rearuudustikule kasutage hõljuma ' klass koos ' grid-rows-
” utiliit HTML-programmis. See muudab hõljutatavate ridade arvu. Muudatuste tagamiseks vaadake veebi HTML-lehte ja hõljutage kursorit ruudustiku üksustel. See artikkel on illustreerinud meetodit hõljutusefekti rakendamiseks Tailwind CSS-i ridade ruudustikule.