Тази статия се занимава с процедурата за внедряване за прилагане на задържане и други състояния със свойства на видимост с помощта на Tailwind CSS.
Как да приложите Hover и други състояния с помощната програма за видимост в Tailwind?
Помощната програма за видимост може да се използва при задържане на мишката и други състояния, за да се направят промени във видимостта при взаимодействие с потребителя. Има три класа под помощната програма за видимост, а именно „ видими ”, “ невидим ', и ' колапс ”. Нека интегрираме някои класове на видимост със състояния на задържане в примерите по-долу за по-добро разбиране.
Пример 1: Прилагане на състояние на задържане покрай „невидимия“ клас
В този случай избраният елемент ще бъде скрит, когато курсорът на потребителя се задържи над елемента, кодът е показан по-долу:
< тяло >
< див клас = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< див клас = 'bg-blue-500 p-3 заоблен текстов център' > 01 < / див >
< див клас = 'bg-blue-500 p-3 hover:невидим заоблен текстов център' > 02 < / див >
< див клас = 'bg-blue-500 p-3 заоблен текстов център' > 03 < / див >
< / див >
< / тяло >
Обяснение на горния код:
- Първо се създава родителският div, който създава оформление на решетка с три колони, имащо разстояние между всяка колона и поле от „ 4px ”. Използване на CSS на Tailwind “ решетка ”, “ grid-cols-3 ”, “ празнина ”, “ моя ', и ' mx ” класове съответно.
- След това три деца “ див ” се създават елементи и към тях се прилага основен стил.
- Тогава ' завъртане ” състояние или селектор в CSS се присвоява на втория „div” и „ невидим ” се присвоява към него, разделени с двоеточие „ : ' знак. Това прави втория div невидим, когато мишката се задържи върху него.
Визуализация на уеб страницата след фазата на изпълнение:
Горният gif показва, че вторият div става невидим при задържане на мишката.
Пример 2: Прилагане на активно състояние покрай „невидимия“ клас
„Активното“ състояние прилага стилове, когато потребителят избере конкретен елемент и не напуска. Точно както текстовите полета, когато потребителят започне да въвежда данни в полето, в този момент полето е активно. За да получите по-ясно разбиране на активното състояние и как работи с класа „невидим“, посетете кода по-долу:
< тяло >< див клас = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< див клас = 'bg-blue-500 p-3 заоблен текстов център' >01< / див >
< див клас = 'bg-blue-500 p-3 активен: невидим заоблен текстов център' >02< / див >
< див клас = 'bg-blue-500 p-3 заоблен текстов център' >03< / див >
< / див >
< / тяло >
В горния код класът на „ невидим ” се присвоява на „ активен ' състояние за втория ' див ”, за да направите втория елемент div скрит, когато бъде избран.
След изпълнението визуализацията на уеб страницата изглежда така:
Горният резултат показва, че когато се избере вторият „div“, елементът става невидим.
Заключение
Ховърът и други състояния като активно или фокус могат да се използват с класовете, предоставени от помощната програма за видимост, за да се променят свойствата за видимост за избраните елементи. За да промените видимостта на елементите при задържане на курсора на мишката, класът на курсора се използва заедно с класовете за видимост, разделени с цвят като „ hover: видим ' или ' hover: невидим ”. Този блог обяснява процедурата за прилагане на състояния при задържане с помощната програма за видимост.