W3docs
ru
Войти

Свойство CSS cursor

The cursor CSS property sets how the cursor looks like when you hover over the element. Know about all the values and see examples with each of them.

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

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

info

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

Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.cursor = "cell";

Синтаксис

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

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

<!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>
Попробуйте сами »

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

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

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

<!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>
Попробуйте сами »

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/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>
Попробуйте сами »

Значения

ValueDescriptionPlay 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?