Šiame straipsnyje bus parodytas būdas pritaikyti pelės žymeklio efektą eilučių tinklelyje „Tailwind CSS“.
Kaip taikyti „Hover on Row Grid“ tailwind?
Norėdami pritaikyti pelės žymeklio efektą eilučių tinklelyje programoje Tailwind, sukurkite HTML failą ir naudokite „ užveskite pelės žymeklį “ klasė su “ grid-rows-
Peržiūrėkite pateiktus praktinio įgyvendinimo veiksmus:
1 veiksmas: naudokite „Hover Property“ su eilučių tinkleliu HTML programoje
Sukurkite HTML programą ir naudokite „ užveskite pelės žymeklį “ turtas su “ grid-rows-
< kūnas >
< 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 >
< / kūnas >
Čia, pirminiame
- “ tinklelis “ klasė naudojama tinklelio išdėstymui sukurti.
- “ tinklelis-eilės-3 “ klasė nurodo, kad tinklelyje turi būti 3 vienodo dydžio eilutės.
- “ hover:grid-rows-5 “ klasė pakeičia tinklelį į 5 vienodo dydžio eilutes, kai ant jo užves pelė.
- “ grid-flow-col “ klasė tinklelio elementus deda horizontaliai į stulpelius.
- “ tarpas-3 ” klasė nustato 3 vienetų atstumą tarp kiekvieno tinklelio elemento.
- “ m-3 ” klasė aplink tinklelio konteinerį taiko 3 vienetų paraštę.
- “ teksto centras “ klasė nustato kiekvieno tinklelio elemento tekstą į centrą.
Vaikų
- “ “ reiškia tinklelio elementų skaičių.
- “ bg-teal-500 “ klasė nustato melsvą spalvą tinklelio elementų fone.
- “ p-5 ” klasė prideda 5 vienetų užpildymą antrinių
elementų turiniui.2 veiksmas: patikrinkite išvestį
Norėdami patikrinti, ar eilučių tinklelyje buvo pritaikytas pelės žymeklio efektas, peržiūrėkite tinklalapį ir užveskite pelės žymeklį ant tinklelio elementų:
Galima pastebėti, kad iš pradžių yra 3 eilutės, o užvedus pelę ant jų, eilučių skaičius pasikeitė į 5. Tai rodo, kad užvedimo efektas buvo sėkmingai pritaikytas eilučių tinklelyje.
Išvada
Norėdami pritaikyti užvedimo efektą eilučių tinklelyje programoje Tailwind, naudokite „ užveskite pelės žymeklį “ klasė su “ grid-rows-
“ įrankį HTML programoje. Tai pakeičia eilučių skaičių užvedus pelės žymeklį. Norėdami užtikrinti pakeitimus, peržiūrėkite žiniatinklio HTML puslapį ir užveskite pelės žymeklį ant tinklelio elementų. Šiame straipsnyje iliustruotas metodas, kaip taikyti pelės žymeklio efektą eilučių tinklelyje „Tailwind CSS“.