cursor CSS

Become a Patron!

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

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

Значение по умолчанию:

auto

Наследуется:
Да
Применяется:

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

Анимируется:
Нет
Объект JavaScript:

object.style.cursor

Спецификации:
Поддержка браузерами:

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.

Синтаксис

/* 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.

Примеры

Пример 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>

Ссылки