كيفية استخدام خاصية أحداث المؤشر في CSS

Kyfyt Astkhdam Khasyt Ahdath Almwshr Fy Css



أثناء تطوير موقع ويب ، قد ترغب في منع المشاهدين من تنفيذ بعض الإجراءات (النقر / التمرير) على بعض عناصر موقع الويب ، مثل الصور أو الارتباطات التشعبية. يمكن أن يكون هناك عدة أسباب؛ على سبيل المثال ، لا تريد أن ينقر المستخدم على الرابط لأنه لتحسين بنية الارتباط الداخلية لموقع الويب أو لحماية ما بداخله. في مثل هذه السيناريوهات ، يمكن استخدام خاصية أحداث المؤشر CSS للحصول على النتائج المطلوبة.

في هذه الكتابة ، سنشرح بالتفصيل كيفية استخدام خاصية أحداث المؤشر CSS.

ما هي خاصية أحداث المؤشر؟

CSS ' مؤشر الأحداث 'تحدد خاصية المؤشر / النقر تجاه عنصر HTML وما إذا كان العنصر المحدد سيستجيب من خلال تنفيذ إجراءات مثل التمرير أو النقر.







كيفية استخدام مؤشر الأحداث الملكية؟

في CSS ، يمكن استخدام خاصية أحداث المؤشر لتمكين أو تعطيل إجراءات المؤشر على بعض عناصر HTML المحددة. فيما يلي بناء جملة الخاصية pointer-events.



بناء الجملة



مؤشر الأحداث : لا أحد | تلقاءي ؛

في النحو المذكور ، ' تلقاءي 'هي القيمة الافتراضية لخاصية أحداث المؤشر ، وهي تتيح إجراء المؤشر تجاه عنصر ، و' لا أحد 'عكس السيارة تمامًا ؛ يقوم بتعطيل عمل المؤشر على عناصر HTML.





دعنا نمضي قدمًا ونأخذ مثالاً لفهم خاصية أحداث المؤشر.

مثال 1
في ملف HTML الخاص بنا ، حدد علامة الارتساء بالنص ' LinuxHint.io 'ووضعه داخل قسم الجسم.



لغة البرمجة

< أ href = 'https://www.linuxhint.io/' > LinuxHint.io < / أ >

الآن ، سوف نستخدم ' مؤشر الأحداث 'وإسناد قيمة لها' لا أحد '. سيؤدي هذا إلى تعطيل عمل المؤشر على العنصر.

CSS

أ {
مؤشر الأحداث : لا أحد ؛
}

احفظ ملف HTML الخاص بك مع الكود المذكور وقم بتشغيله باستخدام متصفحك:

لنأخذ مثالاً آخر لتغطية خاصية أحداث المؤشر بعمق.

مثال 2
عيّن قيمة خاصية أحداث المؤشر على ' تلقاءي ' هذا الوقت. سيجعل العنصر يستجيب فوق المؤشر أو النقر فوقه. ومع ذلك ، فإن القيمة التلقائية هي القيمة الافتراضية لخاصية أحداث المؤشر.

CSS

أ {
مؤشر الأحداث : تلقاءي ؛
}

انتاج |

لقد قمنا بتغطية الاستخدامات المختلفة لخاصية أحداث المؤشر في CSS.

استنتاج

للتحكم في إجراءات المؤشر ، يمكننا استخدام CSS ' مؤشر الأحداث ' منشأه. ال ' تلقاءي 'القيمة هي القيمة المحددة مسبقًا لهذه الخاصية ؛ أنها تمكن الإجراءات على عناصر HTML. عند استخدام الخاصية pointer-events مع القيمة ' لا أحد '، فإنه يعطل الإجراءات تجاه عنصر معين. لقد أوضحت هذه الكتابة كيفية استخدام خاصية أحداث المؤشر في CSS.