الخاصية cursor
الخاصية cursor في CSS تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت، لكن مع تحويل روابط URL النسبية إلى مطلقة. |
/* كلمات محجوزة */
cursor: pointer;
cursor: auto;
/* استخدام رابط للأيقونة مع إحداثيات */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* القيم العامة */
cursor: inherit;
cursor: initial;
cursor: unset;
أمثلة
مثال عن استخدام مختلف القيم مع الخاصية cursor:
<div class="cursors">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
</div>
شيفرة CSS:
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.zoom-in { cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.zoom-out { cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out; }
.grab { cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }
.grabbing { cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: zoom-grabbing; }
body {
text-align: center;
font-family: sans-serif;
}
.cursors {
display: flex;
flex-wrap: wrap;
}
.cursors > div {
flex: 150px;
padding: 10px 2px;
white-space: nowrap;
border: 1px solid #eee;
border-radius: 5px;
margin: 0 5px 5px 0;
}
.cursors > div:hover {
background: #eee;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| auto و crosshair و default و move و text و wait و help و
n-resize و e-resize و s-resize و w-resize و ne-resize و nw-resize و se-resize و sw-resize |
1.0 | 1.0 | 4.0 | 7.0 | 1.2 |
| pointer و progress | 1.0 | 1.0 | 6.0 | 7.0 | 1.2 |
| url() | 1.0 | 1.5 | 6.0 | ؟ | 3.0 |
| إحداثيات <x> <y> | مدعومة | مدعومة | غير مدعومة | ؟ | مدعومة |
| not-allowed و no-drop و vertical-text و all-scroll و
col-resize و row-resize |
1.0 | 1.5 | 6.0 | 10.6 | 3.0 |
| alias و cell و copy و
ew-resize و ns-resize و nesw-resize و nwse-resize |
1.0 | 1.5 | 10.0 | 10.6 | 3.0 |
| context-menu | 1.0 | 1.5 | 10.0 | 10.6 | 3.0 |
| none | 5.0 | 3.0 | 9.0 | 15.0 | 5.0 |
| inherit | 1.0 | 1.0 | 8.0 | 9.0 | 1.2 |
| zoom-in و zoom-out | 37.0 | 24.0 | 13 | 24 | 9 |
| grab و grabbing | 22.0 | 27.0 | 14 | مدعومة | 4.0
مع السابقة |
الإصدارات القديمة من أغلبية المتصفحات تدعم القيم zoom-in و zoom-out و grab و grabbing لكن مع استخدام سابقة (مثل -webkit- أو -moz-)
البنية العامة
الخاصية cursor تقبل رابط URL صفر مرة أو أكثر، ويُفصَل بين القيم بفاصلة، ويجب أن تأتي كلمةٌ محجوزةٌ بعد الروابط، ويجب أن يشير كل رابط URL إلى ملف صورة، وسيحاول المتصفح تحميل أوّل صورة مُحدَّدة، وإن لم يستطع فسيجرِّب تحميل ما يليها إلى أن يصل إلى الكلمة المحجوزة.
يمكن أن يُتبَع كل رابط <url> بزوجٍ من الأرقام المفصول بينهما بفراغ، اللذان يمثلان إحداثيات <x><y> التي تُحدِّد ما هي المنطقة الفعالة في صورة المؤشر (التي ستُشير بالتحديد إلى مكان النقر) نسبةً إلى الزاوية العليا اليسرى منها.
سنُحدِّد في هذا المثال صورتين باستخدام <url>، وسنوفِّر إحداثيات <x><y> للصورة الثانية، وسنستخدم الكلمة المحجوزة progress كمؤشر احتياطي إن لم يتمكن المتصفح من تحميل الصورتين السابقتين:
cursor: url(one.svg), url(two.svg) 5 5, progress;
<url>
رابط url أو أكثر (مفصولٌ بينها بفاصلة)، يشير إلى ملف صورة، وجيب توفير كلمة محجوزة كآخر خيار لاحتمال عدم دعم المتصفح لنوع الصور المُحدَّد أو لعدم قدرته على تحميل الصورة.
<x> <y>
قيمة اختيارية تُمثِّل إحداثيات x و y على التوالي، ويُفصل بينهما بفراغ، ويجب أن يكونا موجبين وأقل من 32.
كلمات محجوزة
كلمة محجوزة من الكلمات الآتية، يمكنك تمرير الفأرة فوق القيمة لمثال حي عنها:
| التصنيف | قيمة CSS | الوصف |
|---|---|---|
| عام | auto
|
سيُحدِّد المتصفح شكل المؤشر الأفضل للعنصر. |
default
|
شكل المؤشر الافتراضي. | |
none
|
لن يُعرَض المؤشر | |
| الروابط والحالات | context-menu
|
تتوافر قائمة منسدلة. |
help
|
تتوافر معلومات مساعدة. | |
pointer
|
يمكن التفاعل مع العنصر بالضغط عليه، كما في الروابط والأزرار. | |
progress
|
البرنامج يجري مهمةً في الخلفية، لكن ما يزال بإمكان المستخدم التفاعل معه (على النقيض من wait).
| |
wait
|
البرنامج يجري مهمةً في الخلفية، ولا يمكن أن يتفاعل المستخدم معه (على النقيض من progress).
| |
| التحديد | cell
|
يمكن تحديد خلية الجدول. |
crosshair
|
سيكون المؤشر على شكل +، مما يشير إلى إمكانية تحديد جزء من صورة. | |
text
|
يمكن تحديد النص، ويكون على شكل حرف I عادةً. | |
vertical-text
|
يمكن تحديد النص الرأسي، ويكون على شكل حرف I لكن أفقيًا. | |
| السحب والإفلات | alias
|
يمكن إنشاء اختصار. |
copy
|
سيُنسَخ شيءٌ ما. | |
move
|
سيُنقَل شيءٌ ما. | |
no-drop
|
لا يمكن إفلات العنصر في هذا المكان. | |
not-allowed
|
لا يمكن إجراء أمر ما. | |
| التمرير وإعادة التحجيم | all-scroll
|
يمكن التمرير بجميع الاتجاهات في العنصر. |
col-resize
|
يمكن إعادة تحجيم العمود رأسيًا، ويُعرَض عادةً على شكل سهم يشير إلى الأعلى والأسفل. | |
row-resize
|
يمكن إعادة تحجيم السطر أفقيًا، ويُعرَض عادةً على شكل سهم يشير إلى اليمين واليسار. | |
n-resize
|
اسم الحافة التي سيُعاد تحجيمها، فمثلًا se-resize ستظهر شكل المؤشر عندما تكون الحركة من الركن «الجنوبي الشرقي» south-east من الصندوق.
يُعرَض مؤشر الاتجاهين في بعض الحالات، فمثلًا سيُعرَض المؤشر <code style="cursor: n-resize</code"> و | |
e-resize
| ||
s-resize
| ||
w-resize
| ||
ne-resize
|
سيُعرَض مؤشر باتجاهين. | |
nw-resize
| ||
se-resize
| ||
sw-resize
| ||
ew-resize
| ||
ns-resize
| ||
nesw-resize
| ||
nwse-resize
| ||
| التقريب | zoom-in
|
يمكن التقريب أو التبعيد في العنصر. |
zoom-out
| ||
| الالتقاط | grab
|
يمكن التقاط شيءٍ ما (كالسحب للنقل). |
grabbing
|
البنية الرسمية
cursor: [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];
انظر أيضًا
- صفحة الخاصية
caret-colorالتي تُحدِّد ما هو لون مؤشر الإدخال النصي.
مصادر ومواصفات
- مواصفة CSS Basic User Interface Module Level 3.
- مواصفة CSS Level 2 (Revision 1).