تغيير مظهر المؤشر
تعرض متصفحات الويب عادةً مؤشر الماوس فوق أي جزء فارغ من صفحة الويب ، ويد القفاز فوق أي عنصر مرتبط أو قابل للنقر ومؤشر التحرير فوق أي نص أو حقل نصي. باستخدام CSS ، يمكنك إعادة تعريف تلك الخصائص لعرض مجموعة متنوعة من المؤشرات المختلفة.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>أمثلة على المؤشرات</title>
<style>
body {
direction:rtl;
text-align:center;
}
a {
cursor: url("examples/images/custom.gif"), url("examples/images/custom.cur"), default;
}
.cursor-demo span{
min-width: 100px;
padding: 5px 10px;
margin-bottom: 5px;
display: inline-block;
border: 1px solid grey;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>مؤشر مخصص</h1>
<p>ضع مؤشر الماوس فوق <a href="#"> هذا الرابط</a> لإظهار المؤشر المخصص.</p>
<hr>
<h2>المزيد من المؤشرات</h2>
<p>ضع مؤشر الماوس فوق المربع لكشف المؤشر.</p>
<div class="cursor-demo">
<span style="cursor: auto;">auto</span>
<span style="cursor: default;">default</span>
<span style="cursor: none;">none</span>
<span style="cursor: context-menu;">context-menu</span>
<span style="cursor: help;">help</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: progress;">progress</span>
<span style="cursor: wait;">wait</span>
<span style="cursor: cell;">cell</span>
<span style="cursor: crosshair;">crosshair</span>
<span style="cursor: text;">text</span>
<span style="cursor: vertical-text;">vertical-text</span>
<span style="cursor: alias;">alias</span>
<span style="cursor: copy;">copy</span>
<span style="cursor: move;">move</span>
<span style="cursor: no-drop;">no-drop</span>
<span style="cursor: not-allowed;">not-allowed</span>
<span style="cursor: grab;">grab</span>
<span style="cursor: grabbing;">grabbing</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor: n-resize;">n-resize</span>
<span style="cursor: ne-resize;">ne-resize</span>
<span style="cursor: nw-resize;">nw-resize</span>
<span style="cursor: s-resize;">s-resize</span>
<span style="cursor: se-resize;">se-resize</span>
<span style="cursor: sw-resize;">sw-resize</span>
<span style="cursor: w-resize;">w-resize</span>
<span style="cursor: ew-resize;">ew-resize</span>
<span style="cursor: ns-resize;">ns-resize</span>
<span style="cursor: nesw-resize;">nesw-resize</span>
<span style="cursor: nwse-resize;">nwse-resize</span>
<span style="cursor: col-resize;">col-resize</span>
<span style="cursor: row-resize;">row-resize</span>
<span style="cursor: all-scroll;">all-scroll</span>
<span style="cursor: zoom-in;">zoom-in</span>
<span style="cursor: zoom-out;">zoom-out</span>
</div>
</body>
</html>
المخرجات
مؤشر مخصص
ضع مؤشر الماوس فوق هذا الرابط لإظهار المؤشر المخصص.
المزيد من المؤشرات
ضع مؤشر الماوس فوق المربع لكشف المؤشر.
يوضح الجدول أدناه المؤشرات المختلفة التي تقبلها معظم المتصفحات. ضع مؤشر الماوس فوق الارتباط "إختبر المؤشر" في عمود المخرجات للكشف عن هذا المؤشر.
| الشكل | القيمة | مثال | المخرجات |
|---|---|---|---|
 |
default |
a:hover{cursor:default;} |
إختبر المؤشر |
 |
pointer |
a:hover{cursor:pointer;} |
إختبر المؤشر |
 |
text |
a:hover{cursor:text;} |
إختبر المؤشر |
 |
wait |
a:hover{cursor:wait;} |
إختبر المؤشر |
 |
help |
a:hover{cursor:help;} |
إختبر المؤشر |
 |
progress |
a:hover{cursor:progress;} |
إختبر المؤشر |
 |
crosshair |
a:hover{cursor:crosshair;} |
إختبر المؤشر |
 |
move |
a:hover{cursor:move;} |
إختبر المؤشر |
 |
url() |
a:hover{cursor:url("custom.cur"), default;} |
إختبر المؤشر |
إنشاء مؤشر مخصص
من الممكن أيضًا أن يكون لديك مؤشرات مخصصة بالكامل.
تعالج الخاصية cursor قائمة مفصولة بفواصل لقيم المؤشرات المعرفة من قبل المستخدم متبوعة بالمؤشر العام. إذا تم تحديد المؤشر الأول بشكل غير صحيح أو تعذر العثور عليه ، فسيتم استخدام المؤشر التالي في القائمة المفصولة بفواصل ، وهكذا حتى يتم العثور على مؤشر قابل للاستخدام.
إذا لم يكن أي من المؤشرات المعرفة من قبل المستخدم صالحًا أو مدعومًا بواسطة متصفح الويب ، فسيتم استخدام المؤشر العام في نهاية القائمة بدلاً من ذلك.
التنسيق القياسي الذي يمكن استخدامه للمؤشرات هو تنسيق .cur ومع ذلك ، يمكنك تحويل الصور مثل .jpg و .gif إلى تنسيق .cur باستخدام برنامج محول الصور المتاح مجانًا عبر الإنترنت.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إنشاء مؤشر مخصص
</title>
<style>
a {
cursor: url("examples/images/custom.gif"), url("examples/images/custom.cur"), default;
}
</style>
</head>
<body>
<p>ضع مؤشر الماوس فوق <a href="#"> هذا الرابط</a> لإظهار المؤشر المخصص.</p>
</body>
</html>
المخرجات
ضع مؤشر الماوس فوق هذا الرابط لإظهار المؤشر المخصص.
في المثال أعلاه ، تكون custom.gif و custom.cur هي ملفات المؤشر المخصص ، الذي تم تحميلها إلى الخادم لديك ، والافتراضي هو المؤشر العام الذي سيتم استخدامه إذا كان المؤشر المخصص مفقودًا ، أو غير مدعوم من قبل متصفح الويب للمستخدم.
هنا مثال حي لمؤشر مخصص.
قم بتمرير مؤشر الماوس فوق هذا الرابط للكشف عن شكل المؤشر المخصص
ملاحظة قوية جدا عند تنفيذ الكود ستظر لتنزيل الصور لكن الحل هو استخدام الكود التالي تحت وسم head بالشكل ادناه ستلاحظ استخدامك لصور الموقع دون تنزيلها
<head>
<base href="https://educationfactorys.com/"/>
</head>