В этой статье будет продемонстрирован метод применения эффекта наведения к сетке строк в Tailwind CSS.
Как применить наведение на сетку строк в Tailwind?
Чтобы применить эффект наведения к сетке строк в Tailwind, создайте файл HTML и используйте « парить ” класс с “ сетка-строки-<значение> » в программе HTML. Он изменяет количество строк при наведении курсора мыши на сетку строк. После этого просмотрите веб-страницу HTML и наведите указатель мыши на элементы сетки, чтобы обеспечить изменения.
Ознакомьтесь с приведенными шагами для практической реализации:
Шаг 1. Используйте свойство Hover с сеткой строк в программе HTML
Создайте программу HTML и используйте « парить ” недвижимость с “ сетка-строки-<значение> ' полезность. Например, мы использовали « наведение: сетка-строки-5 », чтобы изменить количество строк при наведении:
< тело >
< див сорт '=' 'сетка сетка-строки-3 наведение: сетка-строки-5 сетка-поток-столбец пробел-3 м-3 текст-центр' >
< див сорт '=' 'бг-чирок-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 строки одинакового размера.
- “ наведение: сетка-строки-5 ” изменяет сетку на 5 строк одинакового размера при наведении на нее указателя мыши.
- “ сетка-поток-столбец ” размещает элементы сетки горизонтально в столбцах.
- “ разрыв-3 ” устанавливает интервал в 3 единицы между каждым элементом сетки.
- “ м-3 ” применяет отступ в 3 единицы вокруг контейнера сетки.
- “ текстовый центр » устанавливает текст каждого элемента сетки в центр.
В дочерних элементах
- “ <дел> ” представляет количество элементов сетки.
- “ бг-бирюзовый-500 » задает бирюзовый цвет для фона элементов сетки.
- “ р-5 ” добавляет отступ в 5 единиц к содержимому внутри дочерних элементов .
Шаг 2: проверьте вывод
Чтобы убедиться, что эффект наведения был применен к сетке строк, просмотрите веб-страницу и наведите указатель мыши на элементы сетки:
Можно заметить, что изначально имеется 3 ряда, а при наведении на него курсора количество рядов изменилось на 5. Это указывает на успешное применение эффекта наведения к сетке рядов.
Заключение
Чтобы применить эффект наведения к сетке строк в Tailwind, используйте « парить ” класс с “ сетка-строки-<значение> » в программе HTML. Он изменяет количество строк при наведении. Чтобы гарантировать изменения, просмотрите веб-страницу HTML и наведите указатель мыши на элементы сетки. В этой статье проиллюстрирован метод применения эффекта наведения к сетке строк в Tailwind CSS.