From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/cursor/index.html | 299 +++++++++++++++++++++++++++++++++++++ 1 file changed, 299 insertions(+) create mode 100644 files/ru/web/css/cursor/index.html (limited to 'files/ru/web/css/cursor') diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html new file mode 100644 index 0000000000..9d9d3ea077 --- /dev/null +++ b/files/ru/web/css/cursor/index.html @@ -0,0 +1,299 @@ +--- +title: Курсор +slug: Web/CSS/cursor +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Описание

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Применение ключевых значений */
+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> {{experimental_inline}}
+
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
+
Ключевые слова
+
+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияЗначениеВидОписание
ОсновныеautoБраузер самостоятельно определяет значение курсора в зависимости от свойств элемента, на который наведена мышь.
+ Например: при наведении на текст отобразит курсор text.
defaultdefault.gifОсновной курсор платформы, обычно стрелочка.
noneКурсор не отображается.
Ссылки и статусы выполнения задачcontext-menucontext-menu.pngДоступно контекстное меню.
helphelp.gifДоступна вспомогательная информация.
pointerpointer.gifУказатель, обозначающий ссылку, обычно указующая рука.
progressprogress.gifПрограмма занята, но пользователь может взаимодействовать с интерфейсом (в отличие от wait).
waitwait.gifПрограмма занята (песочные часы).
Выделениеcellcell.gifУказывает на возможность выбора клетки или клеток таблицы.
crosshaircrosshair.gifКрестик, часто используемый для обозначения выбора на битовой карте.
texttext.gifЗначок выбора текста.
vertical-textvertical-text.gifЗначок выбора вертикального текста.
"Захвати и перенеси"aliasalias.gifБудет создана ссылка внутри страницы.
copycopy.gifУКазывает на возможность копирования.
movemove.gif +

Указывает на возможностсь перемещения объекта.

+
no-dropno-drop.gifУказывает на невозможность "сбрасывания" объекта.
+ В Windows и Mac OSX то же самое что и not-allowed.
not-allowednot-allowed.gifУказатель невозможности выполнения действия.
Изменение размера, прокручивание (скроллинг)all-scrollall-scroll.gifУказатель возможности перемещения по странице в любом направлении.
+ в Windows то же самое что move.
col-resizecol-resize.gifОбъект может быть раздвинут/сдвинут горизонтально. Обычно две вертикальные черты со стрелочками в разные стороны.
row-resizerow-resize.gifОбьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.
n-resizeExample of a resize towards the top cursorГрань или грани могут быть перемещены. Например se-resize используется для обозначения перемещения с юго-востока. В некоторых системах то же самое что двунаправленное изменение.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifДвунаправленное изменение размера.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Масштабированиеzoom-inzoom-in.gif +

Приближение или уменьшение.

+
zoom-outzoom-out.gif
Захватgrabgrab.gif +

Указывает на возможность схватить и переместить объект.

+
grabbinggrabbing.gif
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+
+ +

Примеры

+ +
.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;
+}
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Addition of several keywords and the positioning syntax for url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Первоначальное определение
+ +

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

+ + + +

{{Compat("css.properties.cursor")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf