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