ستوضح هذه المقالة طريقة تطبيق تأثير التمرير على شبكة الصفوف في Tailwind CSS.
كيفية تطبيق Hover on Row Grid في Tailwind؟
لتطبيق تأثير التمرير على شبكة الصف في Tailwind ، أنشئ ملف HTML واستخدم ' يحوم 'فئة مع' صفوف الشبكة- <القيمة> ”في برنامج HTML. يغير عدد الصفوف عندما يحوم الماوس فوق شبكة الصفوف. بعد ذلك ، قم بعرض صفحة HTML على الويب وحرك الماوس فوق عناصر الشبكة لضمان التغييرات.
تحقق من الخطوات المقدمة للتنفيذ العملي:
الخطوة 1: استخدم خاصية التمرير مع شبكة الصف في برنامج HTML
قم بإنشاء برنامج HTML واستخدم ' يحوم 'مع' صفوف الشبكة- <القيمة> ' جدوى. على سبيل المثال ، استخدمنا ' تحوم: Grid-rows-5 'لتغيير عدد الصفوف عند المرور بالماوس:
< جسم >
< شعبة فصل = 'الشبكة الشبكة-الصفوف -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 صفوف متساوية الحجم.
- ' تحوم: Grid-rows-5 'فئة تغير الشبكة إلى 5 صفوف متساوية الحجم عندما يحوم الماوس فوقها.
- ' شبكة تدفق العمود 'فئة تضع عناصر الشبكة أفقيًا في أعمدة.
- ' فجوة 3 'فئة تحدد مسافة 3 وحدات بين كل عنصر في الشبكة.
- ' م -3 تطبق فئة هامش من 3 وحدات حول حاوية الشبكة.
- ' مركز النص 'فئة نص كل عنصر شبكة إلى المركز.
في عناصر الطفل
- ' 'عدد عناصر الشبكة.
- ' bg-teal-500 'فئة تحدد لون البط البري لخلفية عناصر الشبكة.
- ' ص -5 تضيف فئة 'مساحة متروكة من 5 وحدات إلى المحتوى الموجود داخل عناصر
الفرعية.الخطوة 2: تحقق من الإخراج
للتحقق من تطبيق تأثير التمرير على شبكة الصفوف ، اعرض صفحة الويب وحرك الماوس فوق عناصر الشبكة:
يمكن ملاحظة أنه يوجد في البداية 3 صفوف وعندما يحوم الماوس فوقها ، يتغير عدد الصفوف إلى 5. وهذا يشير إلى أن تأثير التمرير قد تم تطبيقه بنجاح على شبكة الصف.
خاتمة
لتطبيق تأثير التمرير على شبكة الصف في Tailwind ، استخدم ' يحوم 'فئة مع' صفوف الشبكة- <القيمة> ”في برنامج HTML. يغير عدد الصفوف عند التمرير. لضمان التغييرات ، اعرض صفحة HTML على الويب وحرك الماوس فوق عناصر الشبكة. توضح هذه المقالة طريقة تطبيق تأثير التمرير على شبكة الصفوف في Tailwind CSS.