تتناول هذه المقالة إجراء التنفيذ لتطبيق hover والحالات الأخرى ذات خصائص الرؤية باستخدام Tailwind CSS.
كيفية تطبيق Hover والدول الأخرى باستخدام أداة الرؤية المساعدة في Tailwind؟
يمكن استخدام أداة الرؤية المساعدة على طول التمرير والحالات الأخرى لإجراء تغييرات الرؤية على تفاعل المستخدم. هناك ثلاث فئات تحت أداة الرؤية وهي ' مرئي '،' غير مرئى '، و ' ينهار '. دعنا ندمج بعض فئات الرؤية مع حالات التمرير في الأمثلة أدناه لفهم أفضل.
مثال 1: تطبيق حالة التحويم على طول الفئة 'غير المرئية'
في هذه الحالة ، سيتم إخفاء العنصر المحدد عندما يحوم مؤشر المستخدم فوق العنصر ، ويظهر الرمز أدناه:
< جسم >
< شعبة فصل = 'Grid Grid-cols-3 gap-4 my-4 mx-4' >
< شعبة فصل = 'bg-blue-500 p-3 مركز نص مستدير' > 01 < / شعبة >
< شعبة فصل = 'bg-blue-500 p-3 hover: مركز نص مستدير غير مرئي' > 02 < / شعبة >
< شعبة فصل = 'bg-blue-500 p-3 مركز نص مستدير' > 03 < / شعبة >
< / شعبة >
< / جسم >
شرح الكود أعلاه:
- أولاً ، يتم إنشاء عنصر div الأصلي مما يؤدي إلى إنشاء تخطيط شبكة مكون من ثلاثة أعمدة به مسافة بين كل عمود وهامش ' 4 بكسل '. استخدام Tailwind CSS ' شبكة '،' شبكة العواميد 3 '،' فجوة '،' لي '، و ' مكس 'فئات على التوالي.
- التالي ، ثلاثة أطفال ' شعبة 'يتم إنشاء العناصر ويتم تطبيق النمط الأساسي عليها.
- ثم ' يحوم 'الحالة أو المحدد في CSS يتم تعيينه إلى' div 'الثاني و' غير مرئى 'يتم تعيينه لها مفصولة بنقطتين' : ' لافتة. وهذا يجعل عنصر div الثاني غير مرئي عندما يحوم الماوس فوقه.
معاينة صفحة الويب بعد مرحلة التنفيذ:
توضح الصورة المتحركة أعلاه أن div الثاني أصبح غير مرئي عند تمرير الماوس.
مثال 2: تطبيق الحالة النشطة على الطبقة 'غير المرئية'
تطبق الحالة 'النشطة' الأنماط عندما يختار المستخدم عنصرًا معينًا ولا يغادر. تمامًا مثل مربعات النص عندما يبدأ المستخدم في إدخال البيانات داخل الحقل ، يكون الحقل نشطًا في هذا الوقت. للحصول على فهم أكثر وضوحًا للحالة النشطة وكيفية عملها مع الفصل 'غير المرئي' ، تفضل بزيارة الكود أدناه:
< جسم >< شعبة فصل = 'Grid Grid-cols-3 gap-4 my-4 mx-4' >
< شعبة فصل = 'bg-blue-500 p-3 مركز نص مستدير' > 01 < / شعبة >
< شعبة فصل = 'bg-blue-500 p-3 active: مركز نص مستدير غير مرئي' > 02 < / شعبة >
< شعبة فصل = 'bg-blue-500 p-3 مركز نص مستدير' > 03 < / شعبة >
< / شعبة >
< / جسم >
في الكود أعلاه ، فئة ' غير مرئى 'إلى' نشيط 'حالة للثاني' شعبة 'لإخفاء عنصر div الثاني عند تحديده.
بعد التنفيذ ، تظهر معاينة صفحة الويب على النحو التالي:
يوضح الناتج أعلاه أنه عند تحديد 'div' الثاني ، يصبح العنصر غير مرئي.
خاتمة
يمكن استخدام hover والحالات الأخرى مثل active أو focus مع الفئات التي توفرها أداة الرؤية المساعدة لتعديل خصائص الرؤية للعناصر المحددة. لتغيير إمكانية رؤية العناصر عند تمرير الماوس ، يتم استخدام فئة التمرير على طول فئات الرؤية مفصولة باللون مثل ' تحوم: مرئي ' أو ' تحوم: غير مرئي '. توضح هذه المدونة الإجراء الخاص بتطبيق حالات التمرير باستخدام أداة الرؤية المساعدة.