В этой статье будет показан метод применения эффекта наведения к утилите автопотока сетки в Tailwind CSS.
Как применить автопоток при наведении на сетку в Tailwind?
Чтобы применить эффект наведения к автопотоку сетки в Tailwind, создайте HTML-файл и используйте « парить ” класс с “ grid-flow-<ключевое слово> » в программе HTML. Он изменяет размещение элементов сетки при наведении на них курсора мыши. Наконец, просмотрите веб-страницу HTML и наведите указатель мыши на элементы сетки, чтобы внести изменения.
Посмотрите на приведенные шаги для его практической реализации:
Шаг 1. Используйте свойство Hover с сеткой строк в программе HTML
Создайте программу HTML и используйте « парить ” недвижимость с желаемым “ grid-flow-<ключевое слово> ' полезность. Например, мы использовали « наведение: сетка-поток-строка », чтобы изменить размещение элементов сетки из столбца в строку при наведении:
< тело >
< див сорт '=' 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< див сорт '=' 'бг-чирок-500 п-5' > 1 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 2 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 3 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 4 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 5 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 6 < / див >
< / див >
< / тело >
Здесь:
- “ сетка ” устанавливает элемент как контейнер сетки.
- “ сетка-поток-столбец ” определяет поток элементов сетки в столбцах.
- “ наведение: сетка-поток-строка » изменяет поток элементов сетки на строки при наведении указателя мыши на контейнер.
- “ разрыв-3 ” добавляет промежуток в 3 единицы между элементами сетки.
- “ м-3 ” добавляет поле в 3 единицы вокруг контейнера сетки.
- “ текстовый центр » выравнивает текстовое содержимое внутри элементов сетки по центру.
Шаг 2: проверьте вывод
Чтобы убедиться, что эффект наведения был применен к автоматическому потоку сетки, просмотрите веб-страницу и наведите указатель мыши на элементы сетки:
Можно заметить, что изначально поток элементов сетки находится в столбцах, а при наведении на них курсора поток меняется на строки. Это указывает на то, что эффект наведения успешно применен к автопотоку сетки.
Заключение
Чтобы применить эффект наведения к автопотоку сетки в Tailwind, используйте « парить ” класс с желаемым “ grid-flow-<ключевое слово> » в программе HTML. Он изменяет размещение элементов сетки при наведении на них курсора мыши. Чтобы гарантировать изменения, просмотрите веб-страницу HTML и наведите указатель мыши на элементы сетки. В этой статье продемонстрирован метод применения эффекта наведения к утилите автопотока сетки в Tailwind CSS.