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

ستتعلم في هذا الدليل:

• ما هي خاصية Cursor CSS
• كيفية تغيير المؤشر إلى صورة على Hover باستخدام CSS

دعنا نبدأ!

ما هي خاصية CSS 'المؤشر'؟

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

بناء الجملة

يتم إعطاء بناء جملة خاصية المؤشر على النحو التالي:

في الصيغة الموضحة أعلاه ، عيّن مسار الصورة في ' عنوان url () التي تريد عرضها على الشاشة.

سننتقل الآن إلى المثال لتغيير المؤشر العادي إلى صورة عند التمرير.

كيفية تغيير المؤشر إلى صورة عند التمرير باستخدام CSS؟

لتغيير المؤشر إلى صورة عند التمرير ، قم أولاً بإضافة عنصر في HTML.

مثال 1: تغيير المؤشر إلى صورة عند التمرير باستخدام خاصية المؤشر

سننشئ عنوان

واسم فئة الزر ' BTN '.

لغة البرمجة

< هيئة >
< h1 > قم بتغيير المؤشر إلى صورة عند التحويم h1 >
< زر صف دراسي = 'btn' > انقر فوق لي زر >
هيئة >

حاليًا ، سيؤدي التمرير فوق الزر إلى إظهار المؤشر الافتراضي:

انتقل الآن إلى CSS وقم بتغيير المؤشر إلى الصورة.

ثم قم بتعيين مسار الصورة في ' عنوان url () '. على سبيل المثال ، حددنا 'i مع. svg 'كصورتنا المختارة. بعد ذلك ، عيّن قيمة خاصية المؤشر على أنها ' تلقاءي '.

CSS

.btn {
المؤشر: url ( icon.svg ) ، تلقاءي؛
الحشو: 10 بكسل ؛
}

احفظ الكود أعلاه وقم بتنفيذ ملف HTML لرؤية النتيجة التالية:

يشير الناتج المحدد إلى أن المؤشر قد تم تغييره بنجاح إلى صورة عند التمرير.

ملحوظة: ' تلقاءي 'كخيار بديل في خاصية المؤشر ؛ عند عدم تحميل الصورة ، أو فقدان مسار الملف أو الملف نفسه ، يتم عرض الرمز الافتراضي على الشاشة بسبب القيمة التلقائية.

مثال 2: إعداد المؤشر الافتراضي عند التمرير

على سبيل المثال ، سنقدم عنوان url للصورة ونحدد فقط قيمة خاصية المؤشر على أنها ' تلقاءي ':

المؤشر: url ( ) ، تلقاءي؛

نتيجة لذلك ، لن يتغير المؤشر عند التمرير فوق الزر:

مثال 3: تعيين بديل للصورة عند التحويم

بدلاً من تلقائي ، يمكنك تعيين قيم مختلفة للمؤشر الذي تريد عرضه كبديل للصورة. على سبيل المثال ، سنقوم بتغيير قيمة خاصية المؤشر من ' تلقاءي ' إلى ' المؤشر ':

المؤشر: url ( ) مؤشر

كما ترى في الإخراج أدناه ، يتم تغيير المؤشر إلى مؤشر يد عندما يحوم فوق الزر:

لقد قدمنا ​​أسهل طريقة لتغيير صورة المؤشر عند التمرير باستخدام CSS.

استنتاج

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