cursor özelliği, elementin üzerine fare ile gelindiğinde gösterilecek fare işaretçisini (mouse pointer/cursor) belirler.
Sözdizimi
element.style.cursor = "isaretci"
element.style.cursor = "url(isaretciAdres), anahtar"
CSS Sözdizimi
cursor: isaretci
cursor: url(isaretciAdres), anahtar
| isaretci | Aşağıdaki işaretçi değerlerinden birini alır. |
| isaretciAdres | .CUR ve .ANI uzantılı fare işaretçisi dosyasının URL adresi. |
| anahtar | İşaretçi dosyasının bulunamaması durumunda aşağıdaki işaretçi değerlerinden birinin belirtilerek gösterilmesini sağlar. Örneğin: auto, text |
CSS cursor İşaretçi Değerleri
Fare işaretçisi fare konumunu göstermekle beraber işletim sisteminde veya sayfa üzerinde herhangi bir anda üzerinde bulunduğu nesne/element/bileşen ile ilgili yapılabilecek veya o anda devam eden bir işlemi gösterir. Şekil itibariyle temelde işletim sistemine bağlı olan işaretçileri kullanıcının standart listesinden veya yeni seri kurarak değiştirmesi gayet mümkündür. Bu yüzden buradaki işaretçiler ne kadar "popüler" olsalar da farklı sistemlerde farklı şekilde görüneceklerdir.
| cursor: | Test Edin | Resim | Açıklama |
|---|
| auto |
|
Resim Yok |
Tarayıcı işaretçiyici içeriğe göre otomatik olarak belirler. |
| default |
|
Resim Yok |
Varsayılan "Ok" fare işaretçisi. |
| none (FF 3) |
|
Resim Yok |
Fare işaretçisi görünmez. (Sadece Firefox 3) |
| context-menu |
Resim Yok |
|
| help |
|
 |
|
| pointer (IE 6+) |
|
 |
|
| progress (IE 6+) |
|
 |
|
| wait |
|
 |
|
| cell |
|
 |
|
| crosshair |
|
 |
|
| text |
|
 |
|
| vertical-text (IE 6+) |
|
 |
|
| alias |
|
 |
|
| copy |
|
 |
|
| move |
|
 |
|
| no-drop (IE 6+) |
|
  |
|
| not-allowed (IE 6+) |
|
 |
|
| all-scroll |
|
  |
|
| col-resize (IE 6+) |
|
 |
|
| row-resize (IE 6+) |
|
 |
|
| e-resize |
|
 |
|
| ew-resize |
|
 |
|
| n-resize |
|
 |
|
| ne-resize |
|
 |
|
| nesw-resize |
|
 |
|
| ns-resize |
|
 |
|
| nw-resize |
|
 |
|
| nwse-resize |
|
 |
|
| s-resize |
|
 |
|
| se-resize |
|
 |
|
| sw-resize |
|
 |
|
| w-resize |
|
 |
|
| -moz-grab |
|
 |
(Sadece Firefox, SeaMonkey) |
| -moz-grabbing |
|
 |
(Sadece Firefox, SeaMonkey) |
| -moz-zoom-in |
|
 |
(Sadece Firefox, SeaMonkey) |
| -moz-zoom-out |
|
 |
(Sadece Firefox, SeaMonkey) |
Aşağıdaki örnek, CSS cursor özelliği ile varolan ve varolmayan .CUR uzantılı fare işaretçi dosyalarının kullanımını göstermektedir.
<style type="text/css">
#olanCursor,
#olmayanCursor {
width:150px;
height:120px;
margin:6px;
}
#olanCursor {
cursor: url(bicim/isaretciler/mynotlar_cursor.cur), auto;
background-color:#60F0B0;
float:left;
}
#olmayanCursor {
cursor: url(olmayan_isaretci.cur), pointer;
background-color:#60B0F0;
}
</style>
<div id="olanCursor"></div>
<div id="olmayanCursor"></div>
Test Edin