الخاصية cursor

الخاصية cursor في CSS تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.

/* كلمات محجوزة */
cursor: pointer;
cursor: auto;

/* استخدام رابط للأيقونة مع إحداثيات */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* القيم العامة */
cursor: inherit;
cursor: initial;
cursor: unset;

القيمة الابتدائية	auto
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت، لكن مع تحويل روابط URL النسبية إلى مطلقة.

أمثلة

مثال عن استخدام مختلف القيم مع الخاصية 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 مع السابقة -webkit-

الإصدارات القديمة من أغلبية المتصفحات تدعم القيم 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"> و s-resize مثل ns-resize">n-resize و s-resize مثل ns-resize.
	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 ] ];

مصادر ومواصفات

• مواصفة CSS Basic User Interface Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.