Како применити Ховер на Грид Ауто Флов у Таилвинд?

Kako Primeniti Hover Na Grid Auto Flov U Tailvind



У Таилвинд ЦСС-у, услужна класа „грид-ауто-флов” се користи за контролу понашања аутоматског постављања ставки мреже унутар мрежног контејнера. Подразумевано, „грид-ауто-флов“ је постављен на ред, али корисници могу да га промене у колоне. Штавише, корисници такође могу да користе својство лебдења на услужним програмима „редова мреже“ да би применили стилове или променили положај ставки мреже када се миш помери преко њих.

Овај чланак ће дати пример методе за примену ефекта лебдења на услужни програм за аутоматски проток мреже у Таилвинд ЦСС-у.

Како применити Ховер на Грид Ауто Флов у Таилвинд?

Да бисте применили ефекат лебдења на аутоматски ток мреже у Таилвинд-у, направите ХТМЛ датотеку и користите „ лебдети ” разред са “ грид-флов-<кључна реч> ” услужни програм у ХТМЛ програму. Мења положај ставки мреже када миш пређе преко њих. На крају, погледајте веб ХТМЛ страницу и задржите показивач миша на ставкама мреже да бисте осигурали промене.







Погледајте наведене кораке за његову практичну примену:



Корак 1: Користите својство Ховер са мрежом редова у ХТМЛ програму
Направите ХТМЛ програм и користите „ лебдети ” својство са жељеним “ грид-флов-<кључна реч> ' корисност. На пример, користили смо „ ховер:грид-флов-ров ” да бисте променили постављање ставки мреже из колоне у ред при лебдењу:



< тело >

< див класа = 'грид грид-флов-цол ховер:грид-флов-ров гап-3 м-3 тект-центер' >

< див класа = 'бг-теал-500 п-5' > 1 < / див >
< див класа = 'бг-теал-500 п-5' > 2 < / див >
< див класа = 'бг-теал-500 п-5' > 3 < / див >
< див класа = 'бг-теал-500 п-5' > 4 < / див >
< див класа = 'бг-теал-500 п-5' > 5 < / див >
< див класа = 'бг-теал-500 п-5' > 6 < / див >

< / див >

< / тело >

овде:





  • грид ” класа поставља елемент као мрежни контејнер.
  • грид-флов-цол ” дефинише ток ставки мреже у колонама.
  • ховер:грид-флов-ров ” класа мења ток ставки мреже у редове када миш пређе преко контејнера.
  • гап-3 ” додаје размак од 3 јединице између ставки мреже.
  • м-3 ” додаје маргину од 3 јединице око решеткастог контејнера.
  • текстуални центар ” поравнава садржај текста унутар ставки мреже са средиштем.

Корак 2: Проверите излаз
Да бисте проверили да ли је ефекат лебдења примењен на аутоматски ток мреже, погледајте веб страницу и померите миш преко ставки мреже:



Може се приметити да је у почетку ток мрежних ставки у колонама и када миш пређе преко њих, ток се мења у редове. Ово указује да је ефекат лебдења успешно примењен на аутоматски ток мреже.

Закључак

Да бисте применили ефекат лебдења на аутоматски ток мреже у Таилвинд-у, користите „ лебдети ” разред са жељеним “ грид-флов-<кључна реч> ” услужни програм у ХТМЛ програму. Он мења положај ставки мреже када миш пређе преко њих. Да бисте осигурали промене, погледајте веб ХТМЛ страницу и задржите миш на ставкама мреже. Овај чланак је пример методе за примену ефекта лебдења на услужни програм за аутоматски проток мреже у Таилвинд ЦСС-у.