Курсор
Описание
The cursor
CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
Начальное значение | auto |
---|---|
Применяется к | все элементы |
Наследуется | да |
Обработка значения | как указано, но с абсолютными значениями url |
Animation type | discrete |
Синтаксис
css
/* Применение ключевых значений */
cursor: pointer;
cursor: auto;
/* Использование URL и координат */
cursor:
url(cursor1.png) 4 12,
auto;
cursor:
url(cursor2.png) 2 2,
pointer;
/* Глобальные значения */
cursor: inherit;
cursor: initial;
cursor: unset;
Значения
<url>
-
Ссылка или разделённый запятыми список ссылок:
url(…), url(…), …
, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details. <x>
<y>
Экспериментальная возможность-
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
- Ключевые слова
-
Наведите курсор на картинку, чтобы увидеть пример в действии:
Категория Значение Вид Описание Основные auto
Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.
Например: при наведении на текст отобразит курсорtext
.default
Основной курсор платформы, обычно стрелочка. none
Курсор не отображается. Ссылки и статусы выполнения задач context-menu
Доступно контекстное меню. help
Доступна вспомогательная информация. pointer
Указатель, обозначающий ссылку, обычно указующая рука. progress
Программа занята, но пользователь может взаимодействовать с интерфейсом (в отличие от wait
).wait
Программа занята (песочные часы). Выделение cell
Указывает на возможность выбора клетки или клеток таблицы. crosshair
Крестик, часто используемый для обозначения выбора на битовой карте. text
Значок выбора текста. vertical-text
Значок выбора вертикального текста. "Захвати и перенеси" alias
Будет создана ссылка внутри страницы. copy
Указывает на возможность копирования. move
Указывает на возможность перемещения объекта.
no-drop
Указывает на невозможность "сбрасывания" объекта.
В Windows и Mac OSX то же самое что иnot-allowed
.not-allowed
Указатель невозможности выполнения действия. Изменение размера, прокручивание (скроллинг) all-scroll
Указатель возможности перемещения по странице в любом направлении.
в Windows то же самое чтоmove
.col-resize
Объект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны. row-resize
Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками. n-resize
Грань или грани могут быть перемещены. Например se-resize
используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
Двунаправленное изменение размера. ns-resize
nesw-resize
nwse-resize
Масштабирование zoom-in
Приближение или уменьшение.
zoom-out
Захват grab
Указывает на возможность схватить и переместить объект.
grabbing
Формальный синтаксис
cursor =
[ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)
<url> =
<url()> | (en-US)
<src()>
<url()> =
url( <string> (en-US) <url-modifier>* (en-US) ) | (en-US)
<url-token>
<src()> =
src( <string> (en-US) <url-modifier>* (en-US) )
Примеры
css
.foo {
cursor: crosshair;
}
/* use prefixed-value if "zoom-in" isn't supported */
.bar {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz {
cursor: url(hyper.cur), auto;
}
Спецификации
Specification |
---|
CSS Basic User Interface Module Level 4 # cursor |
Совместимость с браузерами
BCD tables only load in the browser