cursor¶

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

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

Синтаксис¶

/* 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		P {cursor: default}
	context-menu		P {cursor: context-menu}
	help		P {cursor: help}
	pointer		P {cursor: pointer}
	progress		P {cursor: progress}
	wait		P {cursor: wait}
	cell		P {cursor: cell}
	crosshair		P {cursor: crosshair}
	text		P {cursor: text}
	vertical-text		P {cursor: vertical-text}
	alias		P {cursor: alias}
	copy		P {cursor: copy}
	move		P {cursor: move}
	no-drop		P {cursor: no-drop}
	not-allowed		P {cursor: not-allowed}
	all-scroll		P {cursor: all-scroll}
	col-resize		P {cursor: col-resize}
	row-resize		P {cursor: row-resize}
	n-resize		P {cursor: n-resize}
	ne-resize		P {cursor: ne-resize}
	e-resize		P {cursor: e-resize}
	se-resize		P {cursor: se-resize}
	s-resize		P {cursor: s-resize}
	sw-resize		P {cursor: sw-resize}
	w-resize		P {cursor: w-resize}
	nw-resize		P {cursor: nw-resize}
	nesw-resize		P {cursor: nesw-resize}
	nwse-resize		P {cursor: nwse-resize}
	zoom-in		P {cursor: zoom-in}
	zoom-out		P {cursor: zoom-out}
	grab		P {cursor: grab}
	grabbing		P {cursor: grabbing}

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

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

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.

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

cursor: auto;

Применяется к: Ко всем элементам

Спецификации¶

Поддержка браузерами¶

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.

Описание и примеры¶

Пример 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 на сайте MDN