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 Значение элемента наследуется от родительского элемента.

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

1.0+ 12.0+ 1.0+ 1.2+ 7.0+


Считаете ли это полезным?

Похожие статьи