ستوضح هذه المقالة طريقة تطبيق تأثير التمرير على شبكة الأعمدة في Tailwind CSS.
كيفية تطبيق Hover on Column Grid في Tailwind؟
لتطبيق تأثير التمرير على شبكة العمود في Tailwind ، أنشئ ملف HTML واستخدم ' يحوم 'فئة مع' الشبكة- Cols-
اتبع الخطوات المتوفرة للتنفيذ العملي:
الخطوة 1: استخدم خاصية التمرير مع شبكة العمود في برنامج HTML
قم بإنشاء برنامج HTML واستخدم ' يحوم 'مع' الشبكة- Cols-
< جسم >
< شعبة فصل = 'تحويم الشبكة العواميد الشبكية 3: الشبكة-العواميد-5 فجوة-3 متر -3 مركز النص' >
< شعبة فصل = 'bg-teal-500 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 2 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 4 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 5 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 6 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 7 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 8 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 9 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 10 < / شعبة >
< / شعبة >
< / جسم >
هنا ، في العنصر الأصل
- ' شبكة 'فئة تستخدم لإنشاء تخطيط شبكي.
- ' شبكة العواميد 3 'فئة تحدد أن الشبكة يجب أن تحتوي على 3 أعمدة متساوية الحجم.
- ' تحوم: الشبكة-العواميد -5 'فئة تحدد أنه يجب تغيير الشبكة إلى 5 أعمدة متساوية الحجم عند تمرير الماوس فوقها.
- ' فجوة 3 'فئة تحدد مسافة 3 وحدات بين كل عنصر في الشبكة.
- ' م -3 تطبق فئة هامش من 3 وحدات حول حاوية الشبكة.
- ' مركز النص 'فئة نص كل عنصر شبكة إلى المركز.
في عناصر الطفل
- ' 'عدد عناصر الشبكة.
- ' bg-teal-500 'فئة تحدد لون البط البري لخلفية عناصر الشبكة.
- ' ص -5 تضيف فئة 'مساحة متروكة من 5 وحدات إلى المحتوى الموجود داخل عناصر
الفرعية.الخطوة 2: تحقق من الإخراج
للتأكد من تطبيق تأثير التمرير على شبكة العمود ، اعرض صفحة الويب وحرك الماوس فوق عناصر الشبكة:
يمكن ملاحظة أنه عندما يحوم الماوس فوق عنصر الشبكة ، يتغير عدد الأعمدة. يشير إلى أنه تم تطبيق تأثير التمرير بنجاح على شبكة العمود.
خاتمة
لتطبيق تأثير التمرير على شبكة العمود في Tailwind ، استخدم ' يحوم 'فئة مع' الشبكة- Cols-
”في برنامج HTML. يغير عدد الأعمدة عند التمرير. لضمان التغييرات ، اعرض صفحة HTML على الويب وحرك الماوس فوق عناصر الشبكة. أوضحت هذه المقالة طريقة تطبيق تأثير التمرير على شبكة العمود في Tailwind CSS.