В этой статье рассматривается процедура реализации для применения наведения и других состояний со свойствами видимости с помощью Tailwind CSS.
Как применить Hover и другие состояния с помощью утилиты видимости в Tailwind?
Утилита видимости может использоваться при наведении и других состояниях, чтобы изменять видимость при взаимодействии с пользователем. В утилите видимости есть три класса, а именно « видимый », « невидимый ', и ' крах ». Давайте интегрируем некоторые классы видимости с состояниями наведения в приведенных ниже примерах для лучшего понимания.
Пример 1: Применение состояния наведения вдоль «невидимого» класса
В этом случае выбранный элемент будет скрыт при наведении курсора пользователя на элемент, код показан ниже:
< тело >
< див сорт '=' 'сетка сетка-столбцы-3 зазор-4 мы-4 мх-4' >
< див сорт '=' 'bg-blue-500 p-3 закругленный текст-центр' > 01 < / див >
< див сорт '=' 'bg-blue-500 p-3 hover: невидимый закругленный текст в центре' > 02 < / див >
< див сорт '=' 'bg-blue-500 p-3 закругленный текст-центр' > 03 < / див >
< / див >
< / тело >
Объяснение приведенного выше кода:
- Во-первых, создается родительский div, который создает макет сетки из трех столбцов с пробелом между каждым столбцом и полем « 4 пикселя ». Использование CSS попутного ветра» сетка », « сетка-столбцы-3 », « зазор », « мой ', и ' МХ классы соответственно.
- Далее трое детей» див » создаются элементы и к ним применяются базовые стили.
- Затем « парить 'состояние' или селектор в CSS назначается второму 'div' и ' невидимый ” присваивается ему через двоеточие “ : ' знак. Это делает второй div невидимым при наведении на него указателя мыши.
Предварительный просмотр веб-страницы после этапа выполнения:
На приведенном выше рисунке показано, что второй элемент div становится невидимым при наведении курсора мыши.
Пример 2: Применение активного состояния вдоль «невидимого» класса
Состояние «активно» применяет стили, когда пользователь выбирает определенный элемент и не уходит. Так же, как текстовые поля, когда пользователь начинает вводить данные в поле, в это время поле активно. Чтобы получить более четкое представление об активном состоянии и о том, как оно работает с «невидимым» классом, посетите приведенный ниже код:
< тело >< див сорт '=' 'сетка сетка-столбцы-3 зазор-4 мы-4 мх-4' >
< див сорт '=' 'bg-blue-500 p-3 закругленный текст-центр' >01< / див >
< див сорт '=' 'bg-blue-500 p-3 active: невидимый закругленный текст в центре' >02< / див >
< див сорт '=' 'bg-blue-500 p-3 закругленный текст-центр' >03< / див >
< / див >
< / тело >
В приведенном выше коде класс « невидимый ” присваивается “ активный 'состояние для второго' див », чтобы скрыть второй элемент div при его выборе.
После выполнения предварительный просмотр веб-страницы выглядит следующим образом:
Приведенный выше вывод показывает, что при выборе второго «div» элемент становится невидимым.
Заключение
Наведение курсора и другие состояния, такие как активное состояние или фокус, можно использовать с классами, предоставляемыми утилитой видимости, для изменения свойств видимости выбранных элементов. Чтобы изменить видимость элементов при наведении мыши, класс наведения используется вместе с классами видимости, разделенными цветом, например « наведение:видимый ' или ' наведение: невидимый ». В этом блоге объясняется процедура применения состояний наведения с помощью утилиты видимости.