cursor

Содержание

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

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

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

Синтаксис

cursor: [url('путь к курсору'),] | [ <курсор> ]

Значения

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

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

Табл. 1. Вид курсора
ВидЗначениеТестПримерПримечание
defaultP {cursor: default} 
context-menuP {cursor: context-menu}Отображается только в IE10+.
helpP {cursor: help} 
pointerP {cursor: pointer} 
progressP {cursor: progress} 
waitP {cursor: wait} 
cellP {cursor: cell} 
crosshairP {cursor: crosshair} 
textP {cursor: text} 
vertical-textP {cursor: vertical-text} 
aliasP {cursor: alias} 
copyP {cursor: copy} 
moveP {cursor: move} 
no-dropP {cursor: no-drop}Все браузеры, кроме IE, отображают как not-allowed.
not-allowedP {cursor: not-allowed} 
all-scrollP {cursor: all-scroll} 
col-resizeP {cursor: col-resize} 
row-resizeP {cursor: row-resize} 
n-resizeP {cursor: n-resize} 
ne-resizeP {cursor: ne-resize} 
e-resizeP {cursor: e-resize} 
se-resizeP {cursor: se-resize} 
s-resizeP {cursor: s-resize} 
sw-resizeP {cursor: sw-resize} 
w-resizeP {cursor: w-resize} 
nw-resizeP {cursor: nw-resize} 
nesw-resizeP {cursor: nesw-resize} 
nwse-resizeP {cursor: nwse-resize} 
zoom-inP {cursor: zoom-in}IE не поддерживает.
zoom-outP {cursor: zoom-out}IE не поддерживает.
grabP {cursor: grab}Chrome, Opera, Safari поддерживают значение -webkit-grab. IE не поддерживает.
grabbingP {cursor: grabbing}Chrome, Opera, Safari поддерживают значение -webkit-grabbing. IE не поддерживает.

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

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

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

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

Пример

<!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>
<!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>

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

Объект.style.cursor

Примечание

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

Opera не работает с файлами курсора.

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

СпецификацияСтатус
CSS Basic User Interface Module Level 3Рабочий проект
CSS Level 2 (Revision 1)Рекомендация

Браузеры

 Internet ExplorerChromeOperaSafariFirefox
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize4171.21
pointer, progress6171.21
url()6131.5
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize6110.631.5
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu10110.631.5
none9553
zoom-in, zoom-out12111.6324
grab, grabbing2215427
 AndroidFirefox MobileOpera MobileSafari Mobile
auto, crosshair, default,move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize119.51.2
pointer, progress119.51.2
url()11.53
not-allowed, no-drop,vertical-text, all-scroll, col-resize, row-resize11.510.63
alias, cell, copy, ew-resize, ns-resize,nesw-resize, nwse-resize11.510.63




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 13:13 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru