كيفية إنشاء عناصر تفاعلية قابلة للتمرير في ووردبريس: أفضل الطرق

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

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

ما هي العناصر التفاعلية في ووردبريس؟

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

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

أضف تأثيرات التمرير إلى العناصر في ووردبريس

هل تتساءل عن أنواع العناصر التي يمكنك تحريكها؟ إليك بعض الأفكار:

• الصور: تكبير، تدوير، أو تغيير الشفافية
• النص: تمييز، أو إخفاء، أو إظهار عند التمرير
• الأزرار: تتوهج، أو تتوسع، أو تنزلق
• الأقسام: تحريك الصفوف أو الحاويات بأكملها
• الأيقونات: النبض، التدوير، أو التكبير/التصغير

استخدم مزيجًا من CSS و JavaScriptوالمكونات الإضافية لتحسين هذه المناطق بناءً على أهداف المحتوى الخاصة بك.

تقنيات متقدمة للعناصر التفاعلية

إذا كنت تتطلع إلى إبهار المستخدمين بتفاعلات متطورة، فاستكشف تقنيات متقدمة مثل:

• تأثيرات المنظر البانورامي، وهي طبقات تتحرك بسرعات مختلفة لإضفاء إحساس ثلاثي الأبعاد
• يكشف الفيديو أو الصورة التي يتم تشغيلها بالتمرير
• التفاعلية الرسوم البيانية أو خرائط القصص
• تتيح تقنية التلعيب للمستخدمين "فتح" المحتوى أثناء تصفحهم
• عدادات أو رسوم بيانية ديناميكية تتحرك أثناء تمرير المستخدمين للشاشة

تتطلب هذه الأمور المزيد من التخطيط وربما موارد التطوير، لكن النتائج قد تكون مذهلة.

تعرّف على المزيد: كيفية إضافة أفضل تأثيرات الرسوم المتحركة إلى موقع ووردبريس

فوائد تأثيرات التحويم

تأثيرات التمرير هي رسوم متحركة صغيرة أو إشارات بصرية تظهر عندما يضع المستخدم مؤشر الماوس فوق عنصر ما. هذه التأثيرات:

• اجعل موقعك الإلكتروني أكثر جاذبية وديناميكية
• سلّط ​​الضوء على المجالات الرئيسية مثل عبارات الحث على اتخاذ إجراء أو المنتجات المميزة
• تحسين تجربة المستخدم بشكل عام من خلال توفير ملاحظات مرئية
• شجع المستخدمين على استكشاف المزيد من المحتوى
• يُضفي مظهراً احترافياً وأنيقاً

سواء كان ذلك زرًا متوهجًا، أو تكبيرًا للصورة، أو حركة نصية دقيقة، فإن تأثيرات التمرير تحافظ على جاذبية موقعك بصريًا.

اطلع على: أفضل مواقع الويب التفاعلية الملهمة

أفضل الممارسات لتأثير التحويم

لتحقيق أقصى استفادة من تأثيرات التمرير، من المهم استخدامها بوعي. عند استخدامها بشكل صحيح، فإنها تعزز تفاعلية موقعك دون المساس بسهولة الاستخدام أو الأداء.

• اجعل التصميم بسيطًا: تجنب الرسوم المتحركة البراقة أو المعقدة للغاية. المؤثرات البسيطة مثل التكبير الطفيف أو تغيير اللون أو التلاشي تبدو أكثر احترافية وأريح للعين، فهي توجه المستخدم دون أن تشتت انتباهه.

• استخدم التأثيرات الهادفة: يجب أن يكون لكل تأثير عند تمرير المؤشر عليه غرض واضح. استخدمها لتسليط الضوء على المناطق القابلة للنقر مثل الأزرار والروابط وعبارات الحث على اتخاذ إجراء. هذا يُحسّن التنقل ويساعد في توجيه انتباه المستخدم إلى الإجراءات المهمة.

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

• ضمان سهولة الوصول: تأكد من أن تأثيرات التمرير تعمل لجميع المستخدمين. حافظ على تباين ألوان عالٍ ، وتجنب الاعتماد على اللون أو الحركة فقط لنقل المعنى. أضف أيضًا نصًا بديلًا وصفيًا للصور، وراعِ خيارات التنقل باستخدام لوحة المفاتيح.

• اختبار التفاعلات: ما يبدو رائعًا على سطح المكتب قد لا يعمل على الهاتف المحمول أو بعض المتصفحات. لذا، اختبر تأثيرات التمرير على مختلف الأجهزة وأحجام الشاشاتوأنظمة التشغيل لضمان سلوك وأداء متسقين.

• ركّز على تجربة المستخدم: يجب أن تُكمّل تأثيرات التمرير رحلة المستخدم، لا أن تُعيقها. ينبغي أن تُحمّل بسلاسة، وتُقدّم ردود فعل فورية، وتُضفي تجربة أكثر سهولة. اسأل نفسك دائمًا: هل يُحسّن هذا التأثير سهولة الاستخدام؟ إذا لم يكن كذلك، فاحذفه!

سهولة الاستخدام والأداء على الأجهزة المحمولة

لا تظهر تأثيرات التمرير دائمًا بشكل جيد على الهواتف المحمولة. لذا:

• استخدم تأثيرات النقر للكشف أو التأثيرات القائمة على اللمس بدلاً من ذلك
• اختبار التفاعلات عبر الأجهزة والمتصفحات
• تجنب استخدام ملفات جافا سكريبت كبيرة الحجم أو الرسوم المتحركة غير المحسّنة
• استخدم أدوات مثل Google PageSpeed ​​Insights أو Lighthouse لمراجعة الأداء

يُعد التصميم المتجاوب وأوقات التحميل السريعة أمراً بالغ الأهمية لتحسين محركات البحث ورضا المستخدم.

طرق إنشاء عناصر تفاعلية عند التمرير

يوفر ووردبريس عدة طرق لإنشاء تأثيرات التمرير والتحويم. تعتمد الطريقة المناسبة على مهاراتك التقنية واحتياجاتك للتخصيص. إليك ثلاث من أكثر الطرق شيوعًا:

• استخدام CSS مخصص أو جافا سكريبت
• بالسحب والإفلات أدوات إنشاء الصفحات
• استخدام الإضافات المتخصصة

دعونا نحلل كل طريقة على حدة.

الطريقة الأولى: خيارات التخصيص باستخدام CSS

إذا كنت تجيد استخدام لغة CSS، يمكنك إنشاء تأثيرات تمرير نظيفة وخفيفة الوزن.

لإضافة CSS مخصص، انتقل إلى: المظهر ⟶ تخصيص ⟶ CSS إضافي، أو استخدم مكونًا إضافيًا لـ CSS المخصص مثل Simple Custom CSS.

لماذا نستخدم CSS المخصص؟

ستحصل على تحكم كامل في التصميم الجذاب بصريًا وتأثيرات تحريك CSS عند تمرير المؤشر. بالإضافة إلى ذلك، ستحصل على كود نظيف لا يُثقل موقعك. يُعد كود CSS ممتازًا أيضًا لأداء الموقع وتحسين محركات البحث، ويعمل مع معظم قوالب ووردبريس. باستخدام CSS المخصص، يمكنك إنشاء تأثيرات تمرير عند تمرير المؤشر على العناصر مثل:

• تغيير لون الخلفية
• انتقالات لون النص
• ظلال الصناديق والحدود
• تكبير الصورة عند تمرير المؤشر
• تأثيرات المنظر البانورامي أو التأثيرات القائمة على التمرير

إضافة CSS لتأثيرات التمرير

حتى بدون معرفة عميقة بالبرمجة، لا يزال بإمكانك تطبيق تأثيرات التمرير باستخدام بعض أكواد CSS الجاهزة.

إليك مثال بسيط:

.button:hover { background-color: #0073aa; color: #ffffff; transform: scale(1.05); transition: all 0.3s ease-in-out; }

أنت تستطيع:

• انسخ مقتطفات CSS من مواقع مثل CodePen أو CSS-Tricks
• استخدم أدوات فحص المتصفح لاختبار التأثيرات في الوقت الفعلي
• قم بتطبيق الأنماط على الأزرار أو الصور أو كتل النصوص

للحصول على طريقة أسهل، جرب إضافات مثل Image Hover Effects Ultimate، التي تقدم أنماطًا جاهزة.

معرفة البرمجة للمؤثرات المتقدمة

للحصول على سلوكيات تفاعلية أكثر تقدماً، مثل الرسوم المتحركة التي يتم تفعيلها بالتمرير أو التأثيرات المتراكبة، ستحتاج إلى معرفة لغة جافا سكريبت أو مكتبة jQuery. إليك ما يمكن تحقيقه باستخدام البرمجة:

• قم بتحريك العناصر عند دخولها إلى منطقة العرض
• إنشاء رسوم متحركة على خط زمني باستخدام GSAP (منصة الرسوم المتحركة GreenSock)
• دمج مؤثرات متعددة في سرد ​​قصصي تفاعلي
• تفعيل العناصر عند موضع التمرير أو اتجاهه

تتطلب هذه التقنيات مهارات برمجة قوية ولكنها توفر مرونة لا حدود لها في تصميم مواقع الويب ويمكنها تحسين تجربة المستخدم بشكل كبير.

تعرّف على: كيفية إنشاء موقع ويب ثلاثي الأبعاد باستخدام ووردبريس

الطريقة الثانية: استخدام أدوات إنشاء الصفحات للعناصر التفاعلية

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

أدوات إنشاء صفحات ووردبريس الشائعة

تتميز العديد من أدوات إنشاء الصفحات بتعدد استخداماتها وسهولة استخدامها:

• Elementor: يوفر مجموعة واسعة من إعدادات الرسوم المتحركة وتأثيرات الحركة المتقدمة.

• ديفي: تشتهر بتأثيراتها البصرية المدمجة وإعدادات الرسوم المتحركة المسبقة.

• بيفر بيلدر: أداة بناء نظيفة وسريعة ومرنة، وهي مثالية للمبتدئين والمستخدمين المتقدمين على حد سواء.

تعمل هذه الأدوات على تبسيط عملية إضافة العناصر التفاعلية من خلال توفير أدوات ووحدات نمطية وخيارات رسوم متحركة جاهزة.

ما يمكنك فعله

باستخدام أداة إنشاء الصفحات، يمكنك:

• أضف تأثيرات تحريك المؤشر إلى الأزرار والصور والأيقونات وأقسام المحتوى

• تشغيل الرسوم المتحركة عند ظهور العناصر أثناء التمرير (مثل التلاشي، والانزلاق لأعلى، والتكبير/التصغير)

• قم بتخصيص إعدادات الرسوم المتحركة مثل التأخير والسرعة والمدة

• قم بتجميع عدة رسوم متحركة على عنصر واحد للحصول على تأثيرات متقدمة

• استعرض تغييرات التصميم في الوقت الفعلي وقم بإجراء تعديلات فورية

• احفظ التصاميم التفاعلية كقوالب لإعادة استخدامها في جميع أنحاء موقعك.

بفضل هذه الميزات، تتيح لك أدوات إنشاء الصفحات التركيز أكثر على التصميم الإبداعي وأقل على التنفيذ التقني.

كيفية إضافة عناصر تفاعلية باستخدام بيفر بيلدر

يُسهّل برنامج Beaver Builder إضافة التأثيرات التفاعلية. إليك دليل سريع خطوة بخطوة:

• الخطوة الأولى: تثبيت وتفعيل إضافة Beaver Builder: انتقل إلى لوحة تحكم ووردبريس. ثم انتقل إلى الإضافات ⟶ إضافة جديد، وابحث عن إضافة Beaver Builder، ثم قم بتثبيتها وتفعيلها.

• الخطوة الثانية: افتح صفحة في Beaver Builder: انتقل إلى الصفحات وحدد الصفحة التي تريد تعديلها. ثم انقر فوق تشغيل Beaver Builder.

• الخطوة 3: إضافة وحدة نمطية: اسحب وأفلت وحدة نمطية (مثل زر أو صورة أو محرر نصوص) في تصميمك. انقر على الوحدة النمطية لفتح لوحة الإعدادات.

• الخطوة الرابعة: تطبيق تأثيرات التمرير أو التحريك: في إعدادات الوحدة، انتقل إلى علامة التبويب "النمط" أو "متقدم". ابحث عن خيارات "الرسوم المتحركة" أو "الانتقال". ثم اختر الرسوم المتحركة التي تريدها (مثل التلاشي، أو الارتداد، أو الانزلاق لأعلى). وأخيرًا، حدد التأخير والمدة ومُشغِّل الرسوم المتحركة (التمرير أو التحريك).

• الخطوة 5: التخصيص والحفظ: اضبط المحاذاة والتباعد والاستجابة. عاين التغييرات مباشرةً، ثم انقر فوق "تم"، ثم "نشر".

هذا كل شيء! لديك الآن عنصر تفاعلي على صفحتك دون كتابة أي كود.

دليل خطوة بخطوة: كيفية تحويل Figma إلى Beaver Builder

الطريقة الثالثة: إنشاء تأثيرات التمرير باستخدام جافا سكريبت

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

فوائد استخدام جافا سكريبت للعناصر التفاعلية

إليكم السبب الذي يدفع المطورين والمستخدمين المتقدمين إلى اللجوء إلى جافا سكريبت:

• تحكم كامل في التوقيت والمحفزات: حدد بدقة متى وكيف تحدث التأثيرات عند التمرير أو النقر أو التمرير فوق العناصر أو المحفزات المخصصة.

• دمج الرسوم المتحركة بسلاسة: قم بتركيب تأثيرات متعددة وإنشاء تسلسلات معقدة عبر العناصر.

• دعم مكتبات الرسوم المتحركة: استفد من المكتبات القوية التي توفر رسومًا متحركة أكثر سلاسة وأداءً.

• سرد القصص المرئي المحسّن: إنشاء تجارب مستخدم غامرة وقائمة على القصة من خلال التفاعلات القائمة على التمرير.

مكتبات جافا سكريبت الموصى بها لتأثيرات التمرير

عند العمل باستخدام جافا سكريبت، يمكن أن يوفر لك استخدام المكتبات المناسبة الوقت والجهد:

• GSAP (منصة الرسوم المتحركة GreenSock): مكتبة قوية وعالية الأداء لإنشاء رسوم متحركة مخصصة.

• ScrollTrigger (من GSAP): إضافة تتيح لك تشغيل الرسوم المتحركة بدقة عندما تظهر العناصر أثناء التمرير.

• التمرير القاطر: يضيف تمريرًا سلسًا مع تأثير المنظر المتوازي والتحولات القائمة على التمرير، وهو مثالي لتصميمات سرد القصص الحديثة.

كيفية إضافة جافا سكريبت إلى موقع ووردبريس الخاص بك

توجد طرق متعددة لإضافة جافا سكريبت، وذلك حسب إعداداتك ومستوى مهاراتك:

• قالب فرعي: مثالي للمطورين. يمكنك إضافة نصوص برمجية مخصصة في ملف functions.php أو مباشرةً ضمن ملفات القالب.

• إضافة إدراج الرؤوس والتذييلات: طريقة سهلة للمبتدئين لإدراج كود جافا سكريبت في موقعك

• البرامج النصية المضمنة عبر أدوات إنشاء الصفحات: تسمح لك بعض أدوات الإنشاء مثل Elementor بإضافة جافا سكريبت مضمنة في عناصر واجهة المستخدم HTML أو عبر كتل التعليمات البرمجية المخصصة.

خطوات إضافة عناصر تفاعلية باستخدام جافا سكريبت

إليك عملية عامة يمكنك اتباعها لإضافة تأثيرات يتم تشغيلها عند التمرير باستخدام JavaScript وGSAP مع ScrollTrigger:

الخطوة الأولى: تثبيت المكتبات الضرورية

يمكنك إضافة البرامج النصية يدويًا أو استخدام شبكة توصيل المحتوى (CDN). إليك مثال على استخدام شبكة توصيل المحتوى:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

أضف هذه العناصر إلى موقعك باستخدام إضافة Insert Headers and Footers أو قم بتضمينها في ملف header.php الخاص بقالبك الفرعي أو عبر wp_enqueue_script().

الخطوة الثانية: إضافة بنية HTML

أضف في صفحتك أو منشورك العناصر التي تريد تحريكها. على سبيل المثال:

<div class="scroll-fade" style=";text-align:right;direction:rtl"><h2 style=";text-align:right;direction:rtl">سيظهر هذا العنوان تدريجيًا عند التمرير</h2></div>

الخطوة 3: كتابة كود جافا سكريبت

أضف النص البرمجي التالي لتحديد حركة التمرير:

gsap.registerPlugin(ScrollTrigger); gsap.from(".scroll-fade", { scrollTrigger: ".scroll-fade", opacity: 0, y: 50, duration: 1, ease: "power2.out" });

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

الخطوة الرابعة: الاختبار على الأجهزة

احرص دائمًا على معاينة التغييرات واختبار الرسوم المتحركة على أحجام شاشات ومتصفحات مختلفة لضمان الأداء السلس والتوافق.

اعتبارات تحسين محركات البحث للعناصر التفاعلية

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

مزايا استخدام العناصر التفاعلية

عند استخدامها بشكل صحيح، توفر العناصر التفاعلية العديد من مزايا تحسين محركات البحث:

• انخفاض معدلات الارتداد: يمكن للرسوم المتحركة الجذابة وتأثيرات التمرير أن تجذب انتباه المستخدمين، مما يشجعهم على البقاء لفترة أطول.

• زيادة تفاعل المستخدم: تعمل تأثيرات التمرير، والرسوم المتحركة القابلة للنقر، والمحتوى الذي يتم تشغيله بالتمرير على خلق تجربة تصفح أكثر تفاعلية، مما يؤدي إلى المزيد من النقرات والتفاعلات.

• تحسين إشارات المستخدم: تقوم محركات البحث بتتبع سلوك المستخدم، مثل الوقت الذي يقضيه على الموقع ونسب النقر، والتي تميل إلى التحسن مع العناصر التفاعلية المصممة جيدًا.

فهم الفرق: تحسين محركات البحث (SEO) مقابل التسويق عبر محركات البحث (SEM)

السلبيات المحتملة (في حال الإفراط في استخدامها)

من ناحية أخرى، قد تأتي التأثيرات سيئة التنفيذ بنتائج عكسية:

• أوقات تحميل الصفحات الأبطأ: يمكن أن تؤدي الرسوم المتحركة الثقيلة والنصوص البرمجية الكبيرة إلى زيادة أوقات التحميل، مما قد يؤثر سلبًا على تحسين محركات البحث ورضا المستخدم.

• ضعف أداء الأجهزة المحمولة: لا تترجم العديد من تأثيرات التمرير بشكل جيد إلى الأجهزة المحمولة، حيث يحل اللمس محل تفاعل الماوس.

• مشاكل إمكانية الوصول: قد تؤدي الرسوم المتحركة المعقدة إلى إرباك برامج قراءة الشاشة أو تجعل من الصعب على المستخدمين ذوي الإعاقة التنقل في موقعك.

دليل شامل: تحسين محركات البحث الداخلي مقابل تحسين محركات البحث الخارجي

أفضل ممارسات تحسين محركات البحث للتصميم التفاعلي

لتحقيق أقصى استفادة من تحسين محركات البحث دون المساس بسهولة الاستخدام، اتبع أفضل الممارسات التالية:

• استخدم لغة HTML الدلالية: قم بتنظيم محتواك باستخدام الوسوم المناسبة (

• تحسين السرعة: للحفاظ على سرعة موقعك، قلل من الرسوم المتحركة غير الضرورية، واضغط الملفات، واستخدم التحميل الكسول.

• الحفاظ على بنية موقع نظيفة: تأكد من أن جميع العناصر التفاعلية قابلة للزحف ولا تتعارض مع التنقل في موقعك أو الروابط الداخلية.

• تجنب حجب المحتوى: لا تقم بإخفاء المحتوى الأساسي خلف الرسوم المتحركة أو العناصر التي تتطلب تفاعل المستخدم للكشف عنها؛ فقد يمنع ذلك محركات البحث من فهرسة المحتوى بشكل صحيح.

الخاتمة والخطوات التالية

تُضفي العناصر التفاعلية عند تمرير المؤشر عليها حيويةً على موقع ووردبريس الخاص بك. فهي تُساعد المستخدمين على التفاعل مع المحتوى الخاص بك وتُرشدهم نحو اتخاذ الإجراءات المهمة.

لستَ بحاجةٍ لأن تكون مطورًا لتبدأ. يمكنك استخدام أدوات إنشاء الصفحات، أو الإضافات، أو CSS المخصص لإضافة تأثيرات التمرير والرسوم المتحركة التي يتم تفعيلها عند التمرير. وإذا كنتَ أكثر خبرة، فإن مكتبات JavaScript مثل GSAP تفتح لك آفاقًا أوسع.

يكمن السر في التركيز على تجربة المستخدم، والحفاظ على سرعة الموقع واستجابته، واختباره على مختلف الأجهزة. ابدأ بخطوات صغيرة، وقِس النتائج، ثم وسّع نطاق العمل حسب الحاجة. باتباع هذه الأساليب وأفضل الممارسات، يمكنك تحويل موقع ويب ثابت إلى منصة تفاعلية وجذابة تجذب المستخدمين وتدفعهم للعودة إليها باستمرار.

الأسئلة الشائعة حول تمرير المؤشر فوق العناصر التفاعلية