Овај чланак се бави процедуром имплементације за примену лебдећих и других стања са својствима видљивости користећи Таилвинд ЦСС.
Како применити Ховер и друге државе са услужним програмом за видљивост у Таилвинд-у?
Услужни програм за видљивост се може користити дуж лебдења и других стања да би се променила видљивост приликом интеракције корисника. Постоје три класе у оквиру услужног програма за видљивост, односно „ видљиво ”, “ невидљиви ', и ' колапс ”. Хајде да интегришемо неке класе видљивости са стањима лебдења у примерима испод ради бољег разумевања.
Пример 1: Примена стања лебдења дуж „невидљиве“ класе
У овом случају, изабрани елемент ће бити сакривен када корисников курсор лебди изнад елемента, код је приказан испод:
< тело >
< див класа = 'грид грид-цолс-3 гап-4 ми-4 мк-4' >
< див класа = 'бг-блуе-500 п-3 заобљен текст-центар' > 01 < / див >
< див класа = 'бг-блуе-500 п-3 лебдећи: невидљиви заобљени центар текста' > 02 < / див >
< див класа = 'бг-блуе-500 п-3 заобљен текст-центар' > 03 < / див >
< / див >
< / тело >
Објашњење горњег кода:
- Прво, креира се родитељ див који креира распоред мреже са три колоне са размаком између сваке колоне и маргине „ 4пк ”. Коришћење Таилвинд ЦСС-а “ грид ”, “ грид-цолс-3 ”, “ јаз ”, “ мој ', и ' мк ” класе респективно.
- Следеће, троје деце“ див ” се креирају елементи и на њих се примењује основни стил.
- Затим ' лебдети ” стање или селектор у ЦСС-у се додељује другом „див” и „ невидљиви ” му је додељено одвојено двотачком „ : ” знак. Ово чини други див невидљивим када се миш пређе преко њега.
Преглед веб странице након фазе извршења:
Горњи гиф показује да други див постаје невидљив при преласку миша.
Пример 2: Примена активног стања дуж „невидљиве“ класе
Стање „активно“ примењује стилове када корисник изабере одређени елемент и не напусти га. Баш као и текстуални оквири када корисник почне да уноси податке унутар поља, у овом тренутку поље је активно. Да бисте јасније разумели активно стање и како оно функционише са „невидљивом“ класом, посетите код у наставку:
< тело >< див класа = 'грид грид-цолс-3 гап-4 ми-4 мк-4' >
< див класа = 'бг-блуе-500 п-3 заобљен текст-центар' >01< / див >
< див класа = 'бг-блуе-500 п-3 активан: невидљиви заобљени текст-центар' >02< / див >
< див класа = 'бг-блуе-500 п-3 заобљен текст-центар' >03< / див >
< / див >
< / тело >
У горњем коду, класа „ невидљиви ” је додељено „ активан “ стање за други “ див ” да би други див елемент био скривен када буде изабран.
Након извршења, преглед веб странице изгледа овако:
Горњи излаз показује да када се изабере други „див“, елемент постаје невидљив.
Закључак
Ховер и друга стања попут активног или фокуса могу се користити са класама које пружа услужни програм за видљивост да би се модификовали својства видљивости за изабране елементе. Да бисте променили видљивост елемената при лебдењу мишем, класа лебдења се користи дуж класа видљивости раздвојених бојом попут „ ховер:висибле ” или “ ховер:невидљиво ”. Овај блог је објаснио процедуру за примену стања лебдења помоћу услужног програма за видљивост.