Свойство CSS cursor

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

Курсор задаётся как ноль или более значений <url>, разделённых запятыми, за которыми следует ключевое значение. Каждый из этих <url> должен указывать на файл изображения. Если браузер не сможет загрузить первое указанное изображение, он перейдёт к следующему. Если браузер не найдёт ни одного изображения, он использует ключевое значение.

INFO

Современные браузеры поддерживают grab, grabbing, zoom-in и zoom-out без префиксов вендора.

Initial Value	auto
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.cursor = "cell";

Синтаксис

Синтаксис свойства CSS cursor

css

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

Пример свойства cursor:

Пример свойства CSS cursor со значениями auto и help

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Try it Yourself »

Вот пример со всеми значениями свойства cursor. Современные браузеры поддерживают эти значения без префиксов вендора.

Пример свойства cursor со значениями "zoom-in", "zoom-out", "grab" и "grabbing":

Пример свойства CSS cursor со всеми значениями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</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>

Try it Yourself »

Пример свойства cursor со значением "url":

Пример свойства cursor с url

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("https://ru.w3docs.com/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Try it Yourself »

Значения

Value	Description	Play it
auto	Это означает, что браузер установит курсор. Это значение по умолчанию для этого свойства.	Play it »
default	Это курсор по умолчанию.	Play it »
none	Это означает, что для элемента курсор не отображается.	Play it »
context-menu	Курсор указывает, что доступно контекстное меню.	Play it »
help	Курсор указывает, что доступна справка.	Play it »
pointer	Курсор указывает на ссылку в виде указателя.	Play it »
progress	Курсор указывает, что программа занята или выполняется.	Play it »
wait	Курсор указывает, что программа занята.	Play it »
cell	Это означает, что курсор указывает на возможность выбора ячейки или набора ячеек.	Play it »
crosshair	Курсор будет отображаться в виде перекрестия.	Play it »
text	Курсор указывает на текст, который можно выделить.	Play it »
`<url>`	Список URL-адресов, разделённых запятыми, для пользовательских курсоров.	Play it »
vertical-text	Курсор указывает на вертикальный текст, который можно выделить.	Play it »
alias	Это означает, что курсор указывает на создание псевдонима чего-либо.	Play it »
copy	Курсор указывает на объект, который можно скопировать.	Play it »
move	Курсор указывает, что объект можно переместить.	Play it »
no-drop	Курсор указывает, что перетаскиваемый элемент нельзя здесь отпустить.	Play it »
not-allowed	Курсор указывает, что запрошенное действие не будет выполнено.	Play it »
all-scroll	Это означает, что курсор указывает на возможность прокрутки в любом направлении.	Play it »
col-resize	Курсор указывает, что ширину столбца можно изменить по горизонтали.	Play it »
row-resize	Курсор указывает, что высоту строки можно изменить по вертикали.	Play it »
n-resize	Курсор указывает, что край блока нужно переместить вверх.	Play it »
s-resize	Курсор указывает, что край блока нужно переместить вниз.	Play it »
e-resize	Курсор указывает, что край блока нужно переместить вправо.	Play it »
w-resize	Курсор указывает, что край блока нужно переместить влево.	Play it »
ns-resize	Курсор указывает на двунаправленный курсор изменения размера.	Play it »
ew-resize	Курсор указывает на двунаправленный курсор изменения размера.	Play it »
ne-resize	Курсор указывает, что край блока нужно переместить вверх и вправо.	Play it »
nw-resize	Курсор указывает, что край блока нужно переместить вверх и влево.	Play it »
se-resize	Курсор указывает, что край блока нужно переместить вниз и вправо.	Play it »
sw-resize	Курсор указывает, что край блока нужно переместить вниз и влево.	Play it »
nesw-resize	Курсор указывает на двунаправленный курсор изменения размера.	Play it »
nwse-resize	Курсор указывает на двунаправленный курсор изменения размера.	Play it »
zoom-in	Курсор указывает, что объект можно увеличить.	Play it »
zoom-out	Курсор указывает, что объект можно уменьшить.	Play it »
grab	Курсор указывает, что объект можно захватить.	Play it »
grabbing	Курсор указывает, что элемент в данный момент перетаскивается.	Play it »
initial	Это заставляет свойство использовать значение по умолчанию.	Play it »
inherit	Оно наследует свойство от родительского элемента.

Практика

What does the CSS 'cursor' property specify in web design?

It specifies the type of cursor to be displayed when pointing over an element.It specifies the color of the cursor when pointing over an element.It specifies the size of the cursor when pointing over an element.It affects the behavior of the cursor when interacting with text or graphical elements.

Свойство CSS cursor ​

Синтаксис ​

Пример свойства cursor: ​

Пример свойства cursor со значениями "zoom-in", "zoom-out", "grab" и "grabbing": ​

Пример свойства cursor со значением "url": ​

Значения ​

Практика ​

Свойство CSS cursor

Синтаксис

Пример свойства cursor:

Пример свойства cursor со значениями "zoom-in", "zoom-out", "grab" и "grabbing":

Пример свойства cursor со значением "url":

Значения

Практика