ستوضح هذه المقالة طريقة تطبيق 'الاختراق الداخلي' عند التمرير في Tailwind CSS.
كيفية تطبيق 'break-inside' على Hover في Tailwind؟
لتطبيق 'break-inside' على التمرير في Tailwind ، استخدم خاصية 'hover' مع الأداة المساعدة 'break-inside' المحددة على العناصر المطلوبة في برنامج HTML. بعد ذلك ، قم بعرض صفحة الويب للتحقق منها.
للحصول على عرض توضيحي عملي ، جرب الخطوات المذكورة أدناه:
الخطوة 1: استخدم خاصية Hover مع الأداة المساعدة 'break-inside'
أنشئ برنامج HTML واستخدم ' يحوم 'مع الأداة المساعدة' الاختراق من الداخل 'المطلوبة. على سبيل المثال ، استخدمنا خاصية hover مع ' كسر داخل - تجنب - العمود 'لتجنب فاصل عمود داخل العنصر
عند التمرير:
< جسم >
< شعبة فصل = 'أعمدة -2 Bg-Yellow-500' >
< ص > مرحبًا. اهلا بك هنا.... < / ص >
< ص فصل = 'التمرير: كسر-داخل-تجنب-العمود' >
استخدم الأدوات المساعدة للكسر للتحكم في كيفية أ
يجب أن يتصرف فاصل الصفحة أو العمود داخل عنصر ... < / ص >
< ص > تعرف على معلومات حول Tailwind CSS ... < / ص >
< ص > الوداع... < / ص >
< / شعبة >
< / جسم >
هنا:
- ' الأعمدة 2 تستخدم فئة 'لتقسيم إلى عمودين.
- ' bg-yellow-500 'فئة تعيين اللون الأصفر على خلفية
.- ' تحوم: كسر داخل العمود تجنب تشير فئة 'في العنصر
إلى أنه عندما يحوم مؤشر الماوس فوقها ، يجب تجنب فاصل العمود داخل العنصر
.
الخطوة 2: تحقق من الإخراج
للتحقق مما إذا كان قد تم تطبيق الأداة المساعدة 'break-inside-تجنب-العمود' بنجاح عند التمرير ، قم بعرض صفحة ويب HTML:
يوضح الناتج أعلاه أنه عندما يحوم المستخدم فوق العنصر المطلوب ، يتم تجنب فاصل العمود داخل العنصر. يشير هذا إلى أنه تم تطبيق 'العمود الفاصل للداخل - تجنب -' بنجاح على العنصر عند التمرير والذي تم تحديده وفقًا له.
خاتمة
لتطبيق 'الفصل الداخلي' عند التمرير في Tailwind ، استخدم ' يحوم 'مع' المطلوب ' اقتحام الداخل ”في برنامج HTML. يمكن استخدام خاصية hover مع أي عنصر. للتحقق ، عرض صفحة الويب. توضح هذه المقالة طريقة تطبيق 'الاختراق الداخلي' على التمرير في Tailwind CSS.
- ' bg-yellow-500 'فئة تعيين اللون الأصفر على خلفية