cursor

Устанавливает вид курсора мыши при наведении на элемент.

Зачем нужно

Даёт пользователю визуальную подсказку о возможном действии: клик, перетаскивание, ввод текста, запрет.

Где используется

  • Кнопки и ссылки — pointer
  • Отключённые элементы — not-allowed
  • Drag-and-drop — grab / grabbing

Code example

/* Основные типы */
.clickable { cursor: pointer; }
.disabled  { cursor: not-allowed; opacity: 0.5; }
.text()-area { cursor: text; }
.loading   { cursor: wait; }
.help-icon { cursor: help; }
.resize    { cursor: nwse-resize; }

/* Drag and drop */
.draggable       { cursor: grab; }
.draggable:active { cursor: grabbing; }

/* Скрыть курсор (видеоплеер) */
.video-fullscreen { cursor: none; }

/* Кастомный курсор */
.custom {
  cursor: url('/cursors/custom.png') 12 12, auto;
}

Связанные темы

Ресурсы