مرر مؤشر الماوس

📅 آخر تحديث: ٢٣ يوليو ٢٠٢٦
✍️ نُشر في: ٢٣ يوليو ٢٠٢٦
📷 يحتوي على 2 صور
الموسوعة الحرة
فأرة الكمبيوتر
عادةً ما يتم تشغيل أحداث تمرير الماوس عن طريق تحريك فأرة الكمبيوتر .

في مجال الحوسبة وتصميم المواقع الإلكترونية ، يُعرف تأثير تمرير الماوس (أو تلميح الأدوات ) بأنه حدث يحدث عندما يُحرّك المستخدم مؤشر الماوس فوق نقطة محددة على شاشة الحاسوب باستخدام الماوس . ويُسمى أيضًا تأثير التحويم، وهو عبارة عن عناصر تحكم رسومية تستجيب عندما يُحرّك المستخدم مؤشر الماوس فوق منطقة مُحددة. قد تكون هذه المنطقة زرًا أو صورة أو رابطًا تشعبيًا . يُمكن لهذا الإجراء البسيط أن يُؤدي إلى استجابات مُختلفة، مثل تغيير لون العنصر أو مظهره، أو عرض معلومات إضافية أو محتوى تفاعلي. يُعد تأثير تمرير الماوس جزءًا أساسيًا من تفاعل المستخدم، حيث يُضيف طبقات من التفاعلية والاستجابة للمواقع الإلكترونية والتطبيقات. [ 1 ] [ 2 ]

يُعدّ تحريك مؤشر الماوس فوق عنصر ما حدثًا يحدث عندما يُمرّر المستخدم مؤشر الماوس فوق منطقة مُحدّدة في واجهة رقمية. لا يحتاج المستخدم إلى النقر أو القيام بأي إدخال آخر، فمجرد وضع المؤشر فوق العنصر يكفي لتفعيل التأثير. من الناحية التقنية، يُعتبر تحريك مؤشر الماوس فوق عنصر ما حدثًا. يُمكن لمطوري الويب استخدام هذا الحدث لإنشاء تجارب ويب ديناميكية ومتجاوبة. باستخدام لغات HTML و CSS و JavaScript ، يُمكن للمصممين تحديد ما يحدث عندما يُمرّر المستخدم مؤشر الماوس فوق عنصر ما. قد يكون هذا تغييرًا مرئيًا، أو عرض محتوى إضافي، أو حتى تفعيل رسوم متحركة مُعقّدة. [ 3 ]

أهمية ذلك في تصميم واجهة المستخدم وتجربة المستخدم

تُعدّ تأثيرات تمرير مؤشر الماوس مهمة لتحسين تصميم واجهة المستخدم (UI) وتجربة المستخدم (UX). فهي تُقدّم تغذية بصرية فورية للمستخدمين، تُشير إلى أن العنصر تفاعلي ويمكن التفاعل معه. تُساعد هذه التغذية في توجيه المستخدمين خلال موقع الويب أو التطبيق، وتُعرّفهم بالعناصر القابلة للنقر أو التفاعلية دون الحاجة إلى النقر أولاً. من منظور تجربة المستخدم، تُساهم تأثيرات تمرير مؤشر الماوس في تجربة أكثر سهولة وجاذبية. فهي تجعل الواجهات تبدو أكثر ديناميكية واستجابة، مما قد يؤدي إلى زيادة رضا المستخدمين وتحسين التفاعل العام مع الموقع. على سبيل المثال، يبدو الزر الذي يتغير لونه عند تمرير مؤشر الماوس فوقه أكثر حيوية وتفاعلية من الزر الثابت، مما يُشجع المستخدمين على النقر والاستكشاف بشكل أكبر. يُمكن أيضًا استخدام تأثيرات تمرير مؤشر الماوس للكشف عن معلومات إضافية دون إحداث فوضى في الواجهة. على سبيل المثال، يُمكن أن تُقدّم تلميحات الأدوات - وهي مربعات نص صغيرة تظهر عند تمرير مؤشر الماوس فوق عنصر ما - تلميحات مفيدة أو تعريفات أو سياقًا إضافيًا دون شغل مساحة دائمة على الشاشة. تُعدّ هذه القدرة على عرض المعلومات عند الطلب ذات قيمة خاصة في الواجهات المعقدة، حيث تكون مساحة الشاشة محدودة. [ 4 ]

التنفيذ التقني

HTML/CSS تمرير الماوس

تُستخدم تأثيرات تمرير مؤشر الماوس بكثرة في تصميم المواقع الإلكترونية، ويتم إنشاؤها باستخدام لغتي HTML وCSS. تُسهّل هذه التقنيات عملية جعل عناصر الويب أكثر تفاعلية واستجابة. ومن أهم الأدوات المستخدمة لإنشاء تأثيرات تمرير مؤشر الماوس في CSS هي :hoverالفئة الزائفة (pseudo class).

فئات CSS الزائفة

تتيح خاصية :hover في CSS للمطورين تحديد الأنماط التي تُطبق على عنصر ما. تُطبق هذه الأنماط عندما يُمرر المستخدم مؤشر الماوس فوق العنصر. على عكس خصائص CSS الثابتة، تستهدف خاصية :hover العنصر فقط عند تحقق شرط معين (التمرير). لا تُطبق الأنماط بشكل دائم. يمكن تطبيق خاصية :hover على أي عنصر HTML تقريبًا، بما في ذلك النصوص والصور والأزرار والروابط. باستخدام :hover، يتغير مظهر هذه العناصر ديناميكيًا، مما يُوفر تجربة مستخدم أكثر جاذبية وتفاعلية. على سبيل المثال، يمكن استخدام :hover لتغيير لون خلفية الزر عند تمرير المستخدم مؤشر الماوس فوقه. مثال آخر هو إضافة ظل للصورة عند تمرير مؤشر الماوس فوقها. إمكانيات :hover واسعة، وتطبيقها بسيط. [ 5 ]

مثال على التعليمات البرمجية

1. تغيير لون الخلفية عند تمرير المؤشر فوق العنصر:

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = "width = device-width, initial-scale=1.0" > <title> لون خلفية التمرير < / title > <style> .hover - button { background - color : blue ; color : white ; padding : 10px 20px ; border : none ; cursor : pointer ; transition : background - color 0.3s ease ; }.hover - button : hover { background - color : green ; } </style> </head> <body> < button class = " hover - button " > مرر المؤشر فوقي < / button > </body> </html>

2. تغيير لون النص عند تمرير المؤشر فوقه:

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width = device-width, initial-scale=1.0" > <title> لون النص عند التمرير </ title > <style> .hover - text { color : black ; font -size : 18px ; text - decoration : none ; transition : color 0.3s ease ; }.hover - text : hover { color : red ; } </style> </head> <body> <a href="#" class="hover-text"> مرر مؤشر الماوس فوق هذا النص </a> </body> </html>​​​​​​​​​​​​​​

3. إضافة ظل عند التمرير

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = "width = device-width, initial-scale=1.0 " > <title> ظل التمرير < / title > <style> .hover - box { width : 200px ; height : 200px ; background - color : lightblue ; margin : 50px ; transition : box - shadow 0.3s ease ; }.hover - box : hover { box - shadow : 0 0 15px rgba ( 0 , 0 , 0 , 0.5 ) ; } </style> </head> <body> < div class = " hover - box " > </div> </body> </html>​​​​

تفعيل جافا سكريبت عند تمرير الماوس

يُعدّ CSS خيارًا ممتازًا لإنشاء تأثيرات تمرير بسيطة وفعّالة. بينما يُتيح JavaScript سلوكيات أكثر تعقيدًا وديناميكية عند تمرير المستخدم مؤشر الماوس فوق عنصر ما. يُمكن لـ JavaScript التحكم بدقة في ما يحدث عند حدوث حدث تمرير الماوس، بما في ذلك عرض تلميحات الأدوات، وتغيير المحتوى، أو تشغيل الرسوم المتحركة والانتقالات التي تتجاوز إمكانيات CSS. ويتم ذلك باستخدام مُستمعي الأحداث، وخاصةً `<event-listener>` onmouseoverو`< event-listener> onmouseout`.

مستمعو الأحداث: onmouseoverوonmouseout

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

  • onmouseover: يقوم بتشغيل وظيفة عند دخول مؤشر الماوس إلى عنصر ما.
  • onmouseout: يُفعّل دالة عندما يغادر مؤشر الماوس عنصرًا ما. [ 6 ]

مثال على التعليمات البرمجية

1. عرض تلميح عند تمرير المؤشر

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width=device-width, initial-scale=1.0"> <title>تلميح عند التمرير</title> <style> .tooltip { display : none ; position : absolute ; background - color : black ; color : white ; padding : 5px ; border - radius : 3px ; font - size : 12px ; } </style> </head> <body> < div id = " hover - element " style = " display : inline - block ; padding : 10px ; background - color : lightblue; cursor:pointer; " > حوم فوقي </div> < div id = " tooltip" class = " tooltip " > هذه تلميحة! </div><script> const hoverElement = document.getElementById ( ' hover-element ' ) ; const tooltip = document.getElementById ( ' tooltip ' ) ;hoverElement.addEventListener ( ' mouseover ' , function ( event ) { tooltip.style.display = ' block ' ; tooltip.style.left = event.pageX + 10 + ' px ' ; tooltip.style.top = event.pageY + 10 + ' px ' ; } ) ;​​​​​​​​hoverElement . addEventListener ( ' mouseout ' , function ( ) { tooltip .style .display = 'none' ; });hoverElement.addEventListener ( ' mousemove ' , function ( event ) { tooltip.style.left = event.pageX + 10 + ' px ' ; tooltip.style.top = event.pageY + 10 + ' px ' ; } ) ; </script> </body> </html>​​​​​​​​​​​​

2. تغيير المحتوى ديناميكيًا عند تمرير المؤشر فوقه

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = " viewport " content = "width = device-width, initial-scale=1.0" > <title> تغيير المحتوى الديناميكي < / title > <style> # hover-box { width : 300px ; height : 200px ; background-color : lightcoral ; text-align : center ; line -height : 200px ; font -size : 20px ; color : white ; cursor : pointer ; transition : background - color 0.3s ease ; } </style> </head> <body> < div id = " hover - box " > مرر المؤشر فوقي < / div ><script> const hoverBox = document.getElementById ( 'hover - box ' ) ;hoverBox.addEventListener ( ' mouseover' , function ( ) { hoverBox.style.backgroundColor = ' darkslateblue' ; hoverBox.textContent = 'أنت تُمرر المؤشر فوق هذا العنصر ! ' ; });hoverBox.addEventListener ( ' mouseout ' , function ( ) { hoverBox.style.backgroundColor = ' lightcoral ' ; hoverBox.textContent = ' مرر المؤشر فوقي ' ; } ) ; </script> </body> </html>​​​

تطبيقات في تصميم مواقع الويب الحديثة

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

تلميحات الأدوات

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

مثال :

تُوفّر تلميحات الأدوات معلومات إضافية عند تمرير المستخدمين مؤشر الماوس فوق العناصر. إليك مثال بسيط باستخدام HTML وCSS وJavaScript.

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width = device - width, initial-scale=1.0" > <title> مثال على تلميح الأدوات < / title > <style> .tooltip { position : relative ; display : inline -block ; cursor : pointer ; }.tooltip .tooltip -text { visibility : hidden ; width : 120px ; background -color : black ; color : #fff ; text - align : center ; border -radius : 5px ; padding : 5px ; position : absolute ; z-index : 1 ; bottom : 125 % ; /* ضع التلميح أعلى النص */ left : 50 % ; margin - left : -60px ; opacity : 0 ; transition : opacity 0.3s ; }.tooltip : hover .tooltip - text { visibility : visible ; opacity : 1 ; } </style> </head> <body>​​​​​​< div class = "tooltip" > مرر المؤشر فوقي < / div > < div class = "tooltip-text" > نص التلميح </ div > </div></body> </html>​​​​

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

مثال :

تُعد قوائم التنقل المنسدلة من الاستخدامات الشائعة لتأثيرات تمرير مؤشر الماوس. إليك مثال على ذلك:

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width = device-width , initial-scale=1.0" > <title> مثال على قائمة منسدلة </ title > <style> ul { list -style-type : none ; margin : 0 ; padding : 0 ; overflow : hidden ; background-color : #333 ; }li { float : left ; }li a , . dropdown-btn { display : inline-block ; color : white ; text-align : center ; padding : 14 px 16 px ; text-decoration : none ; }li a : hover , . dropdown : hover . dropdown-btn { background-color : #111 ; }li.dropdown { display : inline - block ; }.dropdown - content { display : none ; position : absolute ; background -color : #f9f9f9 ; min-width : 160px ; box - shadow : 0px 8px 16px 0px rgba ( 0 , 0 , 0 , 0.2 ) ; z-index : 1 ; }.dropdown -content a { color : black ; padding : 12px 16px ; text -decoration : none ; display : block ; text- align : left ; }.dropdown -content a : hover { background-color : #f1f1f1 ; }.dropdown : hover .dropdown - content { display : block ; } </style> </head> <body>​​​​​​<ul> <li> <a href="#home"> الرئيسية </a> </li> < li class = " dropdown " > <a href="#" class="dropdown-btn"> القائمة المنسدلة </a> < div class = " dropdown - content " > <a href="#link1"> الرابط 1 </a> <a href="#link2"> الرابط 2 </a> <a href="#link3"> الرابط 3 </a> </div> </li> </ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</body> </html>​​​​

معارض الصور

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

مثال :

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

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width = device-width, initial-scale=1.0" > <title> مثال تكبير معرض الصور </ title > <style> .gallery { display : flex ; justify-content : space -around ; flex - wrap : wrap ; }.gallery img { width : 300px ; height : 200px ; transition : transform 0.3s ease ; }​​​​.gallery img : hover { transform : scale ( 1.1 ) ; } </style> </head> <body>​​​​​​< div class = "gallery" > < img src = "https://via.placeholder.com/300x200" alt = "صورة نموذجية 1" > < img src = "https://via.placeholder.com/300x200" alt = " صورة نموذجية 2" > < img src = "https://via.placeholder.com/300x200" alt = " صورة نموذجية 3" > </div></body> </html>​​​​

أزرار تفاعلية

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

مثال : يمكن لتأثيرات تمرير الماوس أن تجعل الأزرار أكثر تفاعلية من خلال تغيير مظهرها ديناميكيًا.

<!DOCTYPE html> < html lang = " en " > <head> < meta charset = "UTF-8" > < meta name = "viewport" content = " width = device-width, initial-scale=1.0" > <title> مثال على زر تفاعلي </ title > <style> .interactive - button { background-color : #008CBA ; border : none ; color : white ; padding : 15px 32px ; text-align : center ; text- decoration : none ; display : inline - block ; font - size : 16px ; margin : 4px 2px ; transition : background - color 0.3s ease , transform 0.3s ease ; cursor : pointer ; }.interactive - button : hover { background - color : # 005f73 ; transform : translateY ( -3px ) ; } </style> </head> <body>​​< button class = "interactive-button" > مرر المؤشر فوقي </ button ></body> </html>​​​​

[ 7 ]

مراجع

  1. ↑ "معالج حدث OnMouseOver: تمرير الماوس فوق الصورة" . www.javascripter.net . تم الاطلاع عليه بتاريخ 19 سبتمبر 2024 .
  2. ↑ "قائمة CSS متقدمة | من تصميم Web Designer Wall" . webdesignerwall.com . تم الاطلاع عليه بتاريخ 19 سبتمبر 2024 .
  3. ↑ "ما الفرق بين حدثي تحريك مؤشر الماوس فوق عنصر ما ودخوله؟" . موقع ستاك أوفرفلو . تم الاطلاع عليه بتاريخ 19 سبتمبر 2024 .
  4. ↑ "كيف يعرف المستخدمون كيفية تمرير مؤشر الماوس فوق العناصر؟" . ux.stackexchange.com . تم الاطلاع عليه في 19 سبتمبر 2024 .
  5. ↑ "onmouseover (عنصر HTML) — SitePoint" . SitePoint . 22 أبريل 2014. تم الاطلاع عليه في 19 سبتمبر 2024 .
  6. ↑ "تحريك الماوس: mouseover/out، mouseenter/leave" . javascript.info . تم ​​الاطلاع عليه في 19 سبتمبر 2024 .
  7. ↑ "حدث عند تمرير مؤشر الماوس" . www.w3schools.com . تم الاطلاع عليه في 19 سبتمبر 2024 .

شعار ويكيميديا ​​كومنزالوسائط المتعلقة بظاهرة تحريك مؤشر الماوس على ويكيميديا ​​كومنز