الخاصية cursor

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية 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 ] ];

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