cursor

Internet Explorer			Chrome			Opera			Safari			Firefox
6.0	7.0	8.0	2.0	3.0	4.0	9.2	9.6	10	2.0	3.1	4.0	2.0	3.0	3.6

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/ui.html#cursor-props

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

Синтаксис

Значения

url: Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI.
auto: Вид курсора по умолчанию для текущего элемента.
inherit: Наследует значение родителя.

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

Табл. 1. Вид курсора
Значение	Тест	Пример
default	ТЕСТ	P {cursor:default}
crosshair	ТЕСТ	P {cursor:crosshair}
help	ТЕСТ	P {cursor:help}
move	ТЕСТ	P {cursor:move}
pointer	ТЕСТ	P {cursor:pointer}
progress	ТЕСТ	P {cursor:progress}
text	ТЕСТ	P {cursor:text}
wait	ТЕСТ	P {cursor:wait}
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}

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

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>cursor</title>
  <style type="text/css">
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
  
  <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
  <p> 
   <a href="help1.htm" class="help">СПРАВКА 1</a><br>
   <a href="help2.htm" class="help">СПРАВКА 2</a><br>
   <a href="help3.htm" class="help">СПРАВКА 3</a>
  </p> 
  
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение свойства cursor

Объектная модель

[window.]document.getElementById("elementID").style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах IE, Safari, Chrome и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text. Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS 3 (кроме hand).

Браузер Safari, Opera, Firefox и Google Chrome не поддерживают значение url.