CSS свойство cursor

Свойство cursor используется для установления формы курсора мыши, когда указатель мыши находится в пределах элемента.

Свойство расширения -webkit- добавляется, чтобы отобразить некоторые значения для Safari, Google Chrome и Opera (новые версии).

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS2
DOM синтаксис	object.style.cursor = "cell";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      text-align: center;
      font-family:  Roboto, Helvetica, Arial, sans-serif;
      }
      .auto { cursor: auto; }
      .help { cursor: help; }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства cursor</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Попробуйте сами!

Пример со всеми значениями свойства cursor. Для значений "zoom-in", "zoom-out", "grab" и "grabbing" добавлено свойство расширения -webkit-:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
      .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; }
      .grab { 
      cursor: -webkit-grab; cursor: grab; }
      .grabbing {
      cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { 
      cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out {
      cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Пример свойства cursor</h2>
    <p>Наведите курсор мыши на элемент и сами увидите изменения.</p>
    <div class="cursor">
      <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="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Браузер сам определяет курсор. Значение по умолчанию.
default	Курсор по умолчанию.
none	Указывает на отсутствие курсора для элемента.
context-menu	Наличие контекстного меню.
help	Наличие справочной информации.
pointer	Курсор-указатель.
progress	Указывает, что программа работает или находится в процессе.
wait	Указывает, что нужно дождаться завершения работы программы.
cell	Курсор укажет, если будет возможность выбрать ячейки.
crosschair	Курсор в виде большого знака “+”.
text	Текстовый курсор.
URL	Список разделенных запятыми URL к пользовательским курсорам.
vertical-text	Курсор указывает на наличие вертикального текста.
allias	Курсор указывает, что есть возможность создать псевдоним чего-то.
copy	Курсор указывает, что есть возможность копировать что-то.
move	Курсор указывает, что есть возможность переместить что-то.
no-drop	Курсор указывает, что нельзя перетащить и опустить элемент.
not-allowed	Курсор указывает, что невозможно выполнить запрашиваемое действие.
all-scroll	Курсор укажет, если будет возможность прокручивания в каком-либо направлении.
col-resize	Курсор указывает, что размер колонки может быть изменен по вертикали.
row-resize	Курсор указывает, что размер строки может быть изменен по вертикали.
n-resize	Курсор указывает, что размер блока может быть растянут вверх.
s-resize	Курсор указывает, что размер блока может быть растянут вниз.
e-resize	Курсор указывает, что размер блока может быть растянут вправо.
w-resize	Курсор указывает, что размер блока может быть растянут влево.
ns-resize	Курсор указывает на двунаправленное изменение размера курсора.
ew-resize	Курсор указывает на двунаправленное изменение размера курсора.
ne-resize	Курсор указывает, что размер блока может быть растянут вверх и вправо.
nw-resize	Курсор указывает, что размер блока может быть растянут вверх и влево.
se-resize	Курсор указывает, что размер блока может быть растянут вниз и вправо.
sw-resize	Курсор указывает, что размер блока может быть растянут вниз и влево.
nesw-resize	Курсор указывает на двунаправленное изменение размера курсора.
nwse-resize	Курсор указывает на двунаправленное изменение размера курсора.
zoom-in	Курсор указывает, что можно увеличить размер элемента.
zoom-out	Курсор указывает что можно уменьшить размер элемента.
grab	Курсор указывает на захват чего-то.
grabbing	Курсор указывает на захват чего-то.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

CSS свойство cursor

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания