Какое значение свойства cursor используется для текста

Какое значение свойства cursor используется для текста thumbnail

CSS свойства

Определение и применение

CSS свойство cursor определяет тип отображаемого курсора.

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

IE не поддерживает пользовательские курсоры URL(), значения zoom-in, zoom-out.
Значение context-menu имеет ограниченную поддержку браузерами. Значения grab и grabbing требуют индекс производителя.

CSS синтаксис:

cursor:»alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | progress | row-resize | s-resize | se-resize | sw-resize| text | URL (свой) | vertical-text | w-resize | wait | zoom-in | zoom-out | initial | inherit»;

JavaScript синтаксис:

object.style.cursor = «alias»

Значения свойства

Наведите на строку с интересующим Вас значением курсора для изменения его вида:

ЗначениеОписание
aliasКурсор указывает, что алиас или ярлык будет создан.
all-scrollКурсор показывает, что что-то можно прокручивать в любом направлении.
autoБраузер устанавливает курсор. Это значение по умолчанию.
cellКурсор указывает на то, что ячейка (или группа ячеек) может быть выбрана.
context-menuКурсор указывает на то, что контекстное меню доступно.
col-resizeКурсор указывает, что столбец может быть изменен по горизонтали.
copyКурсор указывает, что что-то может быть скопировано.
crosshairКурсор в виде перекрестия. Go! go! go!.
defaultКурсор по умолчанию.
e-resizeКурсор указывает, что край блока перемещается вправо (east-восток).
ew-resizeКурсор указывает, двунаправленное изменение размера.
grabКурсор указывает, что что-то можно схватить (перенести).
grabbingКурсор указывает, что что-то переносится.
helpКурсор указывает на то, что доступна помощь.
moveКурсор указывает на то, что что-то можно переместить.
n-resizeКурсор указывает, что край блока перемещается вверх (north — север).
ne-resizeКурсор указывает, что край блока перемещается вверх и право (north/east — север/восток).
nesw-resizeКурсор указывает, двунаправленное изменение размера.
ns-resizeКурсор указывает, двунаправленное изменение размера.
nw-resizeКурсор указывает, что край блока перемещается вверх и влево (north/west — север/запад).
nwse-resizeКурсор указывает, двунаправленное изменение размера.
no-dropКурсор указывает, что перетаскиваемый объект не может быть помещён здесь.
noneКурсор не отображается для элемента.
not-allowedКурсор указывает, что запрошенное действие не будет выполняться.
pointerКурсор-указатель (как правило указывает ссылку).
progressКурсор указывает на то, что программа выполняется.
row-resizeКурсор указывает на то, что ряд может быть изменен по вертикали.
s-resizeКурсор указывает, что край блока перемещается вниз (south — юг).
se-resizeКурсор указывает, что край блока перемещается вниз и право (south/east — юг/восток).
sw-resizeКурсор указывает, что край блока перемещается вниз и влево (south/west — юг/запад).
textКурсор указывает, что текст может быть выбран (выделен).
URL (свой)Пользовательский курсор. Допускается указывать через запятую несколько вариантов.
IExplorer не поддерживает пользовательские курсоры. Если у Вас не отображается Ваше изображение — попробуйте в графическом редакторе убрать у него задний фон (сделать прозрачным).
Пример (если для курсора не загружено первое изображение, то браузер использует второе, если и второе не будет загружено, то браузер установит курсор по умолчанию):
cursor: url(/images/mini3.png), url(/images/mini5.png), auto;
vertical-textКурсор указывает, что вертикальный текст может быть выбран (выделен).
w-resizeКурсор указывает, что край блока перемещается влево (west-запад).
waitКурсор указывает на то, что программа в настоящее время занята.
zoom-inКурсор показывает, что что-то может быть увеличено.
zoom-outКурсор показывает, что что-то может быть уменьшено.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример изменения курсора в CSS</title>
<style>
.hidden {
visibility : hidden; /* скрываем блок (место под него остается) */
width : 125px; /* устанавливаем ширину невидимого блока */
text-align : center; /* выравниваем текст по центру */
}
.button {
visibility : visible; /* внутри скрытого блока элемент будет отображаться */
border : 1px solid orange; /* сплошная граница оранжевого цвета размером в 1 пиксель */
}
.hidden:hover {
visibility : visible; /* при наведении мышкой скрытый блок будет отображен */
cursor : wait; /* при наведении курсор примет вид «программа занята» */
}
</style>
</head>
<body>
<div class = «hidden»>Пожалуйста, подождите…
<div class = «button»>Наведи на меня.</div>
</div>
</body>
</html>

Результат примера:

Открыть пример в новом окне

CSS свойства

Источник

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

Такие же образы может приобретать курсор мыши  и при работе в браузере при просмотре различных веб страниц. Это возможно благодаря каскадным таблицам стилей, которые предоставляют нам такую замечательную возможность как изменение курсора мыши при наведении его на элементы html страницы.

Курсор мыши можно поменять с помощью правила css cursor, которое позволяет установить форму курсора мыши при наведении его на данный элемент веб-страницы. Этот атрибут можно применять к любому элементу веб страницы, будь это строчный или блочный элемент.

Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit

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

Читайте также:  Какие свойства приписывали алхимики философский камень

Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.

Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер  Internet Explorer поддерживает все значения.

 С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI. А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.

При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:

cursor: url (‘адрес картинки 1’), url (‘адрес картинки 2’), …, <ключевое слово>

При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:

<p style=»cursor:url (‘//webcodius.ru/images/cursor.cur’), pointer;»>текст абзаца</p>

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

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

Источник

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

CSS1CSS2CSS2.1CSS3

IEChromeFireFoxOperaSafari

Свойство CSS cursor используется для изменения внешнего вида курсора мыши при наведении на элемент. Каждая операционная система использует свой набор курсоров, которые она меняет в зависимости от действий производимых пользователем, также вид курсоров может меняться вместе со сменой «темы» операционной системы.

Тип свойства

Назначение: интерфейс.

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

Наследуется: да.

Значения

Значением свойства cursor является один из следующих вариантов.

Возможные значения их описание и примеры

ЗначениеОписаниеПримерВ вашем браузере
crosshairКурсор в виде перекрестия.Курсор crosshair
defaultКурсор в браузере по умолчанию.Курсор default
pointerКурсор при наведении на ссылку.Курсор pointer
moveКурсор, показывающий, что данный объект можно переместить.Курсор move
n-resizeКурсор, показывающий, что верхнюю сторону объекта можно переместить.Курсор n-resize
e-resizeПоказывающий, что правую сторону можно переместить.Курсор e-resize
s-resizeМожно переместить нижнюю сторону объекта.Курсор s-resize
w-resizeПеремещение левой стороны объекта.Курсор w-resize
nw-resizeКурсор, показывающий, что левый верхний угол объекта можно переместить.Курсор nw-resize
ne-resizeПоказывающий, что правый верхний угол можно переместить.Курсор ne-resize
se-resizeМожно переместить правый нижний угол объекта.Курсор se-resize
sw-resizeПеремещение левого нижнего угла.Курсор sw-resize
textКурсор для выделения текста.Курсор text
waitКурсор, показывающий, что программа занята (обрабатывает какую-то информацию) и необходимо подождать.Курсор wait
progressКурсор, показывающий, что программа обрабатывает информацию, но при этом пользователь может работать.Курсор progress
helpКурсор, показывающий, что для данного объекта имеется справочная информация.Курсор help
url(‘адрес’)Установка собственного курсора. В кавычках указывается адрес файла (*.ani, *.cur) с курсором. Можно указать несколько файлов через запятую. Тогда, если браузер не сможет обработать первый файл, он перейдет ко второму и т.д. В самом конце указывается общий курсор, если браузер вообще не сможет обработать ни один файл: cursor: url(‘1.cur’), url(‘2.cur’), url(‘3.ani’), crosshair.  
autoВид курсора, который программа использует по умолчанию для подобных элементов.  
inheritНаследует значение cursor от родительского элемента.  

Процентная запись: не существует.

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

Синтаксис

cursor: [ [url(‘адрес’),]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress] ] | inherit

Пример CSS: использование cursor

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>seodon.ru — CSS свойство cursor</title>
<style type=»text/css»>
.ani { cursor: url(‘files/link.ani’), pointer; }
.cur { cursor: url(‘files/link.cur’), pointer; }
.png { cursor: url(‘files/link.png’), pointer; }
.jpg { cursor: url(‘files/link.jpg’), pointer; }
.gif { cursor: url(‘files/link.gif’), pointer; }
</style>
</head>
<body>
<p>Если курсор по URL браузер не обработает, то указатель
будет стандартный, как при наведении на ссылку.</p>
<p class=»ani»>Курсор в ANI</p>
<p class=»cur»>Курсор в CUR</p>
<p class=»png»>Курсор в PNG</p>
<p class=»jpg»>Курсор в JPG</p>
<p class=»gif»>Курсор в GIF</p>
</body>
</html>

Результат примера

Результат. Использование свойства CSS cursor.

Использование свойства CSS cursor

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаЧастичноДа

Opera не понимает значение url(‘адрес’), то есть не поддерживают загрузку своих курсоров. Все остальные браузеры понимают это значение, но каждый из них поддерживает только определенный список форматов курсоров.

Читайте также:  Какое свойство характерно для всех металлов

Источник

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства cursor в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.

Синтаксис

Базовый (CSS 2.1) синтаксис для этого свойства:

cursor: [<url>,]* ключевое_слово

Это означает, что устанавливать можно любое количество URL’ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как auto или pointer.

Например, такая последовательность значений допустима:

cursor: url(foo.cur), url(https://www.example.com/bar.gif), auto;

В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto.

Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):

cursor: [<uri> [<x> <y>]?,]* ключевое_слово

Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.

Пример CSS 3 синтаксиса:

.foo {
cursor: auto;
cursor: url(cursor1.png) 4 12, auto;
}

.bar {
cursor: pointer;
cursor: url(cursor2.png) 2 2, pointer;
}

/* откатываются на ‘auto’ и ‘pointer’ в IE, но должны быть установлены отдельны */

Первое число определяет координату по оси x, а вторая — по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).

Ограничения

Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.

Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.

В Gecko (Firefox) максимальный размер курсора — 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.

(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32×32 пикселя. Это исправляется в более новых версиях.)

Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.

URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).

Совместимость с другими браузерами

Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства cursor. Тем не менее:

  • IE поддерживает только CUR и ANI форматы.
  • IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.
БраузерРанняя версияФорматыx-y-координаты
Internet Explorer6.0.cur | .ani
Firefox (Gecko), Windows и Linux 1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko) 4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera
Safari (Webkit) 3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
Начиная с OS X 10.5, Safari (Mac) поддерживает  .cur файлы

Источник

Свойство cursor определяет форму указателя мыши, когда он находится в границах блока. В целом вид курсора зависит от операционной системы и установленной темы оформления данного пользователя.

Курсоры общего назначения:

  •  CSS2 CSS3 auto — браузер автоматически определяет тип курсора для отображения  в зависимости от типа и положения элемента, с учетом специфики опрерационной системы и пользовательских настроек. Например, но большенстве систем, для ссылок будет выставлен тип pointer, для текстовых блоков text и т.д.
  • CSS2 CSS3 default  — курсор по умолчанию для текущей операционной системы и пользовательских настроек, как правило в стандартных темах оформления выглядит как стрелочка.
  • CSS3 none — пустой курсор, не отображается ничего.

Курсоры для ссылок и текущего статуса:

  • CSS3 context-menu — указывает, что для элемента под курсором доступно контекстное меню. Обычно отображается как стрелочка с небольшой иконкой меню рядом. Практически не поддреживается браузерами на основе WebKit (Safari, Chrome) и Gecko (Firefox)
  • CSS2 CSS3 help — указывает, что для элемента под курсором доступна справочная информация. Обычно отображается как стрелочка с небольшим вопросительным знаком рядом, либо как просто вопросительный знак.
  • CSS2 CSS3 pointer — указатель, такой типа по умолчанию используется для всех ссылок.
  • CSS2 CSS3 progress — указывает, что система занята выполнением задачи, но у пользователя есть возможность продолжать взаимодействие с системой.
  • CSS2 CSS3 wait — указывает, что  система занята выполением задачи, и пользователю необходимо подождать.

Курсоры для выбора:

  • CSS3 cell — указывает, что данная ячейка таблицы может быть выбрана. Обычно отображается как символ «плюс» с широкими линиями.
  • CSS2 CSS3 crosshair — отображается, как простой крестик.
  • CSS2 CSS3 text — указывает, что текст в данном блоке можно выделить. Обычно отображается как заглавная буква I.
  • CSS3 vertical-text — используется аналогично указателю text, за тем исключением, что обозначает текстовые блоки с вертикальным текстом. Обычно отображается как повернутая на 90° заглавная буква I.

Курсоры для перетаскивание (Drag&Drop):

  • CSS3 alias — указывает, что для элемента будет создан ярлык. Часто отображается как стрелочка, с маленькой закругленной стрелочкой рядом.
  • CSS3 copy — указывает, что элемент будет скопирован. Часто отображается как стрелочка, с небольшим знаком «плюс» рядом.
  • CSS2 CSS3 move — указывает, что элемент будет перемещен. Часто отображается как четыре стрелочки в разные стороны из центра.
  • CSS3 no-drop — указывает, что элемент невозможно перетащить на текущую позицию.
  • CSS3 not-allowed — указывает, что текущее действие запрещено.
Читайте также:  Лемносский бог тебя сковал какое свойство металла

Курсоры для изменения размеров и прокрутки:

  • CSS2 CSS3 e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize — группа курсоров обозначаемых стрелочками, используется как правило при обозначении возможности подвинуть край какого-нибудь блока в соотетствующую сторону
  • CSS3 ew-resize, ns-resize, nesw-resize, nwse-resize
  • Indicates a bidirectional resize cursor.
  • CSS3 col-resize — Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
  • CSS3 row-resize — Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
  • CSS3 all-scroll — Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.

Пользовательские курсоры:

  • CSS2 CSS3 uri — курсор из ресурса, обозначенного в URI. Если браузер не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если браузер не может обработать ни один из курсоров, определённый пользователем, он обязан использовать общий курсор в конце списка, например:
    .element {
    cursor: url(1.cur), url(1.png), auto;
    }

  • CSS3 uri x y — расширенный формат пользовательского курсора, когда возможно задать координаты точки для курсора, которая будет являться основной для данного курсора. Если x и y не заданы, то берется точка 0 0 — верхний левый угол изображения. Координаты можно задавать для каждого файла с изображением, например:
    .element {
    cursor: url(1.cur) 5 5, url(1.png) 7 7, auto;
    }

    Доступные форматы изображений для курсоров зависят от браузера:

      Internet Explorer Firefox Chrome Safari Opera
    .ani
    анимированные курсоры
    > 6.0
    .cur> 6.0>1.5>1.0>3.0
    .png, .jpg, .gif* и другие форматы распозноваемые браузером как изображения>1.5>1.0>3.0
    .svg>4.0>6.0

    *Анимированные GIF не делают анимированных курсоров, отображается только первый кадр

Специфические курсоры:

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

WebKit (Safari, Chrome)
  • -webkit-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -moz-grab.
  • -webkit-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -moz-grabbing.
  • -webkit-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -moz-zoom-in.
  • -webkit-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -moz-zoom-out.
Gecko (Firefox)
  • -moz-cell — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 1.9.2 (Firefox 3.6)), вместо рекомендуется использовать курсор cell.
  • -moz-alias — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор alias.
  • -moz-context-menu — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор context-menu.
  • -moz-copy — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор copy.
  • -moz-spinning — устаревший курсор (с версии Gecko 1.7.1 (Firefox 1.0), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор progress.
  • -moz-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -webkit-grab.
  • -moz-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -webkit-grabbing.
  • -moz-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -webkit-zoom-in.
  • -moz-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -webkit-zoom-out.

Примеры использования:

CSS 2.1

CSS 3

Свойство cursor определено в спецификациях CSS 2.1 и CSS 3 модуль Basic User Interface Level 3 (пользовательский интерфейс, уровень 3), применяется к всем элементам, и действует на всех визуальные, интерактивные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

  • Спецификация стандарта CSS 2.1
  • Спецификация стандарта CSS 3
  • Описание на Mozilla Developer Network
  • Описание на Microsoft Developer Network
  • Описание на Safari Developer Library

Краткое описание

тип курсора мыши при наведении на элемент

Синтаксис:

CSS2
[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

CSS3
[ [<uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll ] ] | inherit

По умолчанию:

auto

Применяется к:

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

Наследование:

не наследуется

Тип носителя:

визуальные, интерактивные

Объектная модель документа (DOM):

[элемент].style.cursor

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Источник