CSS'de cursor özelliği, bir öğe üzerine fare işaretçisi geldiğinde gösterilecek imleç tipini belirlemenize olanak tanır. Bu, kullanıcı arayüzünde gezinirken kullanıcıya ekstra görsel ipuçları sağlayarak, öğelerin etkileşimli olduğunu veya belirli bir işlevi yerine getirdiğini belirtmek için kullanışlıdır.

cursor özelliği için çeşitli değerler kullanılabilir, bunlar arasında en yaygın olanları şunlardır:

auto: Tarayıcının duruma göre otomatik olarak bir imleç seçmesini sağlar.

default: Varsayılan işaretçi imleci.

pointer: El imleci, genellikle bir bağlantı üzerine gelindiğinde görüntülenir.

text: I-ışını imleci, metin üzerine gelindiğinde görüntülenir ve metnin seçilebileceğini gösterir.

wait: Bir işlemin devam ettiğini gösteren saat veya kum saati imleci.

help: Soru işareti veya başka bir "yardım" imleci, yardım veya daha fazla bilgi mevcut olduğunu gösterir.

crosshair: Nişan almak için kullanılan artı şeklinde bir imleç.

move: Taşınabilir bir öğe olduğunu belirten bir imleç.

not-allowed: Etkileşimde bulunulamayacak bir öğe üzerine geldiğinde görüntülenir, genellikle bir yasak işareti veya çarpı şeklindedir.

Örnek kullanımlar:

.button {
  cursor: pointer;
}

.disabled-button {
  cursor: not-allowed;
}

.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

TailwinCSS:

Class	Properties	Preview
cursor-auto	cursor: auto;
cursor-default	cursor: default;
cursor-pointer	cursor: pointer;
cursor-wait	cursor: wait;
cursor-text	cursor: text;
cursor-move	cursor: move;
cursor-help	cursor: help;
cursor-not-allowed	cursor: not-allowed;
cursor-none	cursor: none;
cursor-context-menu	cursor: context-menu;
cursor-progress	cursor: progress;
cursor-cell	cursor: cell;
cursor-crosshair	cursor: crosshair;
cursor-vertical-text	cursor: vertical-text;
cursor-alias	cursor: alias;
cursor-copy	cursor: copy;
cursor-no-drop	cursor: no-drop;
cursor-grab	cursor: grab;
cursor-grabbing	cursor: grabbing;
cursor-all-scroll	cursor: all-scroll;
cursor-col-resize	cursor: col-resize;
cursor-row-resize	cursor: row-resize;
cursor-n-resize	cursor: n-resize;
cursor-e-resize	cursor: e-resize;
cursor-s-resize	cursor: s-resize;
cursor-w-resize	cursor: w-resize;
cursor-ne-resize	cursor: ne-resize;
cursor-nw-resize	cursor: nw-resize;
cursor-se-resize	cursor: se-resize;
cursor-sw-resize	cursor: sw-resize;
cursor-ew-resize	cursor: ew-resize;
cursor-ns-resize	cursor: ns-resize;
cursor-nesw-resize	cursor: nesw-resize;
cursor-nwse-resize	cursor: nwse-resize;
cursor-zoom-in	cursor: zoom-in;
cursor-zoom-out	cursor: zoom-out;

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}