cursor CSS

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

Вид курсора зависит от операционной системы и установленных параметров.

Свойство **`cursor`** устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Значение по умолчанию:

auto

Значение по умолчанию:
`auto`
Наследуется:
Да
Применяется:

Ко всем элементам

Применяется:
Ко всем элементам
Анимируется:
Нет
Объект JavaScript:

object.style.cursor

Объект JavaScript:
`object.style.cursor`
Спецификации:
Спецификации:
* [CSS Basic User Interface Module Level 3](http://dev.w3.org/csswg/css3-ui/#cursor) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/ui.html#cursor-propsy)
Поддержка браузерами:

Can I Use css3-cursors? Data on support for the css3-cursors feature across the major browsers from caniuse.com.

cursor: zoom-in/zoom-out:

Can I Use css3-cursors-newer? Data on support for the css3-cursors-newer feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css3-cursors" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css3-cursors">Can I Use css3-cursors?</a> Data on support for the css3-cursors feature across the major browsers from caniuse.com. </p> `cursor: zoom-in/zoom-out`: <p class="ciu_embed" data-feature="css3-cursors-newer" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css3-cursors-newer">Can I Use css3-cursors-newer?</a> Data on support for the css3-cursors-newer feature across the major browsers from caniuse.com. </p>

Синтаксис

/* Keyword value only */
cursor: pointer;
cursor: auto;

/* Using URL and coordinates */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

Синтаксис

/* Keyword value only */ cursor: pointer; cursor: auto; /* Using URL and coordinates */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Global values */ cursor: inherit; cursor: initial; cursor: unset;

Значения

  • url — Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
  • auto — Вид курсора по умолчанию для текущего элемента.
  • none — Отключает отображение курсора.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Вид Значение Тест Пример
default
default
default P {cursor: default}  
context-menu
context-menu
context-menu P {cursor: context-menu} Отображается только в IE10+.
help
help
help P {cursor: help}  
pointer
pointer
pointer P {cursor: pointer}  
progress
progress
progress P {cursor: progress}  
wait
wait
wait P {cursor: wait}  
cell
cell
cell P {cursor: cell}  
crosshair
crosshair
crosshair P {cursor: crosshair}  
text
text
text P {cursor: text}  
vertical-text
vertical-text
vertical-text P {cursor: vertical-text}  
alias
alias
alias P {cursor: alias}  
copy
copy
copy P {cursor: copy}  
move
move
move P {cursor: move}  
no-drop
no-drop
no-drop P {cursor: no-drop} Все браузеры, кроме IE, отображают как not-allowed.
not-allowed
not-allowed
not-allowed P {cursor: not-allowed}  
all-scroll
all-scroll
all-scroll P {cursor: all-scroll}  
col-resize
col-resize
col-resize P {cursor: col-resize}  
row-resize
row-resize
row-resize P {cursor: row-resize}  
n-resize
n-resize
n-resize P {cursor: n-resize}  
ne-resize
ne-resize
ne-resize P {cursor: ne-resize}  
e-resize
e-resize
e-resize P {cursor: e-resize}  
se-resize
se-resize
se-resize P {cursor: se-resize}  
s-resize
s-resize
s-resize P {cursor: s-resize}  
sw-resize
sw-resize
sw-resize P {cursor: sw-resize}  
w-resize
w-resize
w-resize P {cursor: w-resize}  
nw-resize
nw-resize
nw-resize P {cursor: nw-resize}  
nesw-resize
nesw-resize
nesw-resize P {cursor: nesw-resize}  
nwse-resize
nwse-resize
nwse-resize P {cursor: nwse-resize}  
zoom-in
zoom-in
zoom-in P {cursor: zoom-in} IE не поддерживает.
zoom-out
zoom-out
zoom-out P {cursor: zoom-out} IE не поддерживает.
grab
grab
grab P {cursor: grab} Chrome, Opera, Safari поддерживают значение -webkit-grab. IE не поддерживает.
grabbing
grabbing
grabbing P {cursor: grabbing} Chrome, Opera, Safari поддерживают значение -webkit-grabbing. IE не поддерживает.

В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <курсор>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Примечание

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out.

Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out.

Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing.

Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing.

Браузеры на мобильных устройствах не поддерживают свойство cursor.

Значения

* `url` -- Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. * `auto` -- Вид курсора по умолчанию для текущего элемента. * `none` -- Отключает отображение курсора. Остальные допустимые значения приведены в табл. 1. <table> <caption> Табл. 1. Вид курсора</caption> <thead> <tr><th>Вид</th><th>Значение</th><th>Тест</th><th>Пример</th></tr> </thead> <tbody> <tr><td markdown="1">![default](/workspace/uploads/css/default.png)</td><td>default</td><td style="CURSOR: default"></td><td>P {cursor: default}</td><td> </td></tr> <tr><td markdown="1">![context-menu](/workspace/uploads/css/context-menu.png)</td><td>context-menu</td><td style="CURSOR: context-menu"></td><td>P {cursor: context-menu}</td><td>Отображается только в IE10+.</td></tr> <tr><td markdown="1">![help](/workspace/uploads/css/help.png)</td><td>help</td><td style="CURSOR: help"></td><td>P {cursor: help}</td><td> </td></tr> <tr><td markdown="1">![pointer](/workspace/uploads/css/pointer.png)</td><td>pointer</td><td style="CURSOR: pointer"></td><td>P {cursor: pointer}</td><td> </td></tr> <tr><td markdown="1">![progress](/workspace/uploads/css/progress.png)</td><td>progress</td><td style="CURSOR: progress"></td><td>P {cursor: progress}</td><td> </td></tr> <tr><td markdown="1">![wait](/workspace/uploads/css/wait.png)</td><td>wait</td><td style="CURSOR: wait"></td><td>P {cursor: wait}</td><td> </td></tr> <tr><td markdown="1">![cell](/workspace/uploads/css/cell.png)</td><td>cell</td><td style="CURSOR: cell"></td><td>P {cursor: cell}</td><td> </td></tr> <tr><td markdown="1">![crosshair](/workspace/uploads/css/crosshair.png)</td><td>crosshair</td><td style="CURSOR: crosshair"></td><td>P {cursor: crosshair}</td><td> </td></tr> <tr><td markdown="1">![text](/workspace/uploads/css/text.png)</td><td>text</td><td style="CURSOR: text"></td><td>P {cursor: text}</td><td> </td></tr> <tr><td markdown="1">![vertical-text](/workspace/uploads/css/vertical-text.png)</td><td>vertical-text</td><td style="CURSOR: vertical-text"></td><td>P {cursor: vertical-text}</td><td> </td></tr> <tr><td markdown="1">![alias](/workspace/uploads/css/alias.png)</td><td>alias</td><td style="CURSOR: alias"></td><td>P {cursor: alias}</td><td> </td></tr> <tr><td markdown="1">![copy](/workspace/uploads/css/copy.png)</td><td>copy</td><td style="CURSOR: copy"></td><td>P {cursor: copy}</td><td> </td></tr> <tr><td markdown="1">![move](/workspace/uploads/css/move.png)</td><td>move</td><td style="CURSOR: move"></td><td>P {cursor: move}</td><td> </td></tr> <tr><td markdown="1">![no-drop](/workspace/uploads/css/no-drop.png)</td><td>no-drop</td><td style="CURSOR: no-drop"></td><td>P {cursor: no-drop}</td><td>Все браузеры, кроме IE, отображают как <span class="value">not-allowed</span>.</td></tr> <tr><td markdown="1">![not-allowed](/workspace/uploads/css/not-allowed.png)</td><td>not-allowed</td><td style="CURSOR: not-allowed"></td><td>P {cursor: not-allowed}</td><td> </td></tr> <tr><td markdown="1">![all-scroll](/workspace/uploads/css/all-scroll.png)</td><td>all-scroll</td><td style="CURSOR: all-scroll"></td><td>P {cursor: all-scroll}</td><td> </td></tr> <tr><td markdown="1">![col-resize](/workspace/uploads/css/col-resize.png)</td><td>col-resize</td><td style="CURSOR: col-resize"></td><td>P {cursor: col-resize}</td><td> </td></tr> <tr><td markdown="1">![row-resize](/workspace/uploads/css/row-resize.png)</td><td>row-resize</td><td style="CURSOR: row-resize"></td><td>P {cursor: row-resize}</td><td> </td></tr> <tr><td markdown="1">![n-resize](/workspace/uploads/css/n-resize.png)</td><td>n-resize</td><td style="CURSOR: n-resize"></td><td>P {cursor: n-resize}</td><td> </td></tr> <tr><td markdown="1">![ne-resize](/workspace/uploads/css/ne-resize.png)</td><td>ne-resize</td><td style="CURSOR: ne-resize"></td><td>P {cursor: ne-resize}</td><td> </td></tr> <tr><td markdown="1">![e-resize](/workspace/uploads/css/e-resize.png)</td><td>e-resize</td><td style="CURSOR:e-resize"></td><td>P {cursor: e-resize}</td><td> </td></tr> <tr><td markdown="1">![se-resize](/workspace/uploads/css/se-resize.png)</td><td>se-resize</td><td style="CURSOR: se-resize"></td><td>P {cursor: se-resize}</td><td> </td></tr> <tr><td markdown="1">![s-resize](/workspace/uploads/css/s-resize.png)</td><td>s-resize</td><td style="CURSOR: s-resize"></td><td>P {cursor: s-resize}</td><td> </td></tr> <tr><td markdown="1">![sw-resize](/workspace/uploads/css/sw-resize.png)</td><td>sw-resize</td><td style="CURSOR: sw-resize"></td><td>P {cursor: sw-resize}</td><td> </td></tr> <tr><td markdown="1">![w-resize](/workspace/uploads/css/w-resize.png)</td><td>w-resize</td><td style="CURSOR: w-resize"></td><td>P {cursor: w-resize}</td><td> </td></tr> <tr><td markdown="1">![nw-resize](/workspace/uploads/css/nw-resize.png)</td><td>nw-resize</td><td style="CURSOR: nw-resize"></td><td>P {cursor: nw-resize}</td><td> </td></tr> <tr><td markdown="1">![nesw-resize](/workspace/uploads/css/nesw-resize.png)</td><td>nesw-resize</td><td style="CURSOR: nesw-resize"></td><td>P {cursor: nesw-resize}</td><td> </td></tr> <tr><td markdown="1">![nwse-resize](/workspace/uploads/css/nwse-resize.png)</td><td>nwse-resize</td><td style="CURSOR: nwse-resize"></td><td>P {cursor: nwse-resize}</td><td> </td></tr> <tr><td markdown="1">![zoom-in](/workspace/uploads/css/zoom-in.png)</td><td>zoom-in</td><td style="CURSOR: zoom-in"></td><td>P {cursor: zoom-in}</td><td>IE не поддерживает.</td></tr> <tr><td markdown="1">![zoom-out](/workspace/uploads/css/zoom-out.png)</td><td>zoom-out</td><td style="CURSOR: zoom-out"></td><td>P {cursor: zoom-out}</td><td>IE не поддерживает.</td></tr> <tr><td markdown="1">![grab](/workspace/uploads/css/grab.png)</td><td>grab</td><td style="CURSOR: grab;cursor:-webkit-grab"></td><td>P {cursor: grab}</td><td>Chrome, Opera, Safari поддерживают значение <span class="value">-webkit-grab</span>. IE не поддерживает.</td></tr> <tr><td markdown="1">![grabbing](/workspace/uploads/css/grabbing.png)</td><td>grabbing</td><td style="CURSOR: grabbing;cursor:-webkit-grabbing"></td><td>P {cursor: grabbing}</td><td>Chrome, Opera, Safari поддерживают значение <span class="value">-webkit-grabbing</span>. IE не поддерживает.</td></tr> </tbody> </table> В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице. При добавлении курсора из файла синтаксис несколько видоизменится. cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <курсор> Через запятую допускается указывать несколько значений `url`, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, `auto` или `pointer`, допустимые значения перечислены выше. ### Примечание Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG. Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения `-webkit-zoom-in` и `-webkit-zoom-out`. Firefox до версии 24 поддерживает значения `-moz-zoom-in` и `-moz-zoom-out`. Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения `-webkit-grab` и `-webkit-grabbing`. Firefox до версии 27 поддерживает значения `-moz-grab` и `-moz-grabbing`. Браузеры на мобильных устройствах не поддерживают свойство `cursor`.

Примеры

Пример 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
  <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
  <p> 
   <a href="page/help.html" class="help">СПРАВКА 1</a><br />
   <a href="page/help.html" class="help">СПРАВКА 2</a><br />
   <a href="page/help.html" class="help">СПРАВКА 3</a>
  </p> 
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   a { cursor: url(cursor/sniper.cur), pointer; }
  </style>
 </head> 
 <body>
  <p>Обычный текст</p>
  <p><a href="page/1.html">Ссылка 1</a> <a href="page/2.html">Ссылка 2</a>
   <a href="page/3.html">Ссылка 3</a></p> 
 </body>
</html>

Ссылки

Примеры

### Пример 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cursor</title> <style> .cross { cursor: crosshair; } .help { cursor: help; } </style> </head> <body> <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p> <p> <a href="page/help.html" class="help">СПРАВКА 1</a><br /> <a href="page/help.html" class="help">СПРАВКА 2</a><br /> <a href="page/help.html" class="help">СПРАВКА 3</a> </p> </body> </html> ### Пример 2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cursor</title> <style> a { cursor: url(cursor/sniper.cur), pointer; } </style> </head> <body> <p>Обычный текст</p> <p><a href="page/1.html">Ссылка 1</a> <a href="page/2.html">Ссылка 2</a> <a href="page/3.html">Ссылка 3</a></p> </body> </html> ## Ссылки * [Свойство cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) на сайте developer.mozilla.org

Содержание

  • Синтаксис
      /* Keyword value only */ cursor: pointer; cursor: auto; /* Using URL and coordinates */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Global values */ cursor: inherit; cursor: initial; cursor: unset;
  • Значения
    • Примеры
      • Пример 1
      • Пример 2
      • ### Пример 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cursor</title> <style> .cross { cursor: crosshair; } .help { cursor: help; } </style> </head> <body> <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p> <p> <a href="page/help.html" class="help">СПРАВКА 1</a><br /> <a href="page/help.html" class="help">СПРАВКА 2</a><br /> <a href="page/help.html" class="help">СПРАВКА 3</a> </p> </body> </html> ### Пример 2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cursor</title> <style> a { cursor: url(cursor/sniper.cur), pointer; } </style> </head> <body> <p>Обычный текст</p> <p><a href="page/1.html">Ссылка 1</a> <a href="page/2.html">Ссылка 2</a> <a href="page/3.html">Ссылка 3</a></p> </body> </html> ## Ссылки * [Свойство cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) на сайте developer.mozilla.org

    В начало