Как изменить горизонтальный курсор на вертикальный

Курсор

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

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

Интерактивный пример

Синтаксис

/* Ключевые слова */ cursor: auto; cursor: pointer; /* … */ cursor: zoom-out; /* Использование с обязательным резервным ключевым словом */ cursor: url(hand.cur), pointer; /* Использование URL и координат с обязательным резервным ключевым словом */ cursor: url(cursor_1.png) 4 12, auto; cursor: url(cursor_2.png) 2 2, pointer; /* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом */ cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* …, */ url(cursor_n.cur) 5 5, progress; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: revert; cursor: revert-layer; cursor: unset;

Значения

url() или разделенный запятыми список url(), url(), … , указывающий на файл изображения. В качестве запасного варианта можно указать несколько url() на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.

Необязательные координаты X и Y, задающие указательную точку курсора.

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

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

Доступные ключевые слова перечислены в таблице ниже. Значения кроме none (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов.

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

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

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

Формальное определение

Начальное значение	auto
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано, но с абсолютными значениями url
Animation type	discrete

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

=
| (en-US)

=
x

=
y

=
url( (en-US) * (en-US) ) | (en-US)

=
src( (en-US) * (en-US) )

Примеры

Задание типа курсора

.foo  cursor: crosshair; > .bar  cursor: zoom-in; > /* Использование резервного ключевого слова обязательно при использовании URL */ .baz  cursor: url("hyper.cur"), auto; >

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

Specification
CSS Basic User Interface Module Level 4 # cursor

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

BCD tables only load in the browser

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

pointer-events
url() function

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Динамическое изменение состояния курсора

Есть такая интересная WindowsAPI-функция — setSystemCursor. У нее есть два параметра.

□ Курсор, который надо изменить. Чтобы указать на системный курсор, МОЖНО ИСПОЛЬЗОВАТЬ ФУНКЦИЮ GetCursor.

Вид системного курсора, который нужно установить. Здесь можно указать одно из следующих значений:

• ocr_NORMAL — нормальный курсор в виде стрелки;

• ocr_ibeam — курсор, используемый для выделения текста;

• ocr_wait — большие песочные часы;

• ocr__up — стрелка вверх;

• OCRSIZE — курсор изменения размера;

• ocr__sizewe — курсор горизонтального изменения размера;

• OCR_sizens — курсор вертикального изменения размера;

• ocr_sizeall — курсор горизонтального и вертикального изменения размера;

• ocr__sizeno — интернациональный несимвольный курсор;

• ocr_appstarting — маленькие песочные часы со стрелкой.

И сразу же небольшой пример изменения текущего вида указателя мыши:

procedure TForml.ButtonlClick(Sender: TObject);

Вопрос: Можно ли рандомно менять вид системного курсора, чтобы в течение определенного времени курсор последовательно принимал все перечисленные значения?

Rabid Coyote

Посмотреть профиль

Отправить персональное сообщение для Rabid Coyote

Отправить Email для Rabid Coyote

Найти все сообщения от Rabid Coyote

31.12.2012, 17:32
Профессионал
Регистрация: 19.10.2010
Адрес: Москва
Сообщения: 2,390
Вы сказали Спасибо: 52
Поблагодарили 346 раз(а) в 319 сообщениях
Версия Delphi: XE3/VS12/FASM
Репутация: 14665
Можно. В чем проблема?
__________________
jmp $ ; Happy End!
The Cake Is A Lie.
31.12.2012, 18:30
Регистрация: 08.06.2012
Сообщения: 32
Вы сказали Спасибо: 4
Поблагодарили 0 раз(а) в 0 сообщениях
Версия Delphi: 10 Lite, 2007
Репутация: 10
Сообщение от Bargest
Можно. В чем проблема?

проблема в том, что у меня не получается. )))

попробовал вот так:

procedure TForm1.Button1Click(Sender: TObject); begin repeat randomize; setSystemCursor(GetCursor, ocr_cross); setSystemCursor(GetCursor, ocr_wait) setSystemCursor(GetCursor, ocr_up); setSystemCursor(GetCursor, ocr_normal); until true; end; end.;

lmikle: пользуемся правильными тегами!

но может быть, можно лучше? ))

Последний раз редактировалось lmikle, 01.01.2013 в 12:21 .

Rabid Coyote

Посмотреть профиль

Отправить персональное сообщение для Rabid Coyote

Отправить Email для Rabid Coyote

Найти все сообщения от Rabid Coyote

31.12.2012, 22:11
Профессионал
Регистрация: 19.10.2010
Адрес: Москва
Сообщения: 2,390
Вы сказали Спасибо: 52
Поблагодарили 346 раз(а) в 319 сообщениях
Версия Delphi: XE3/VS12/FASM
Репутация: 14665

Во-первых, рандомайз внутри цикла лишен смысла. Он делается один раз при старте программы. Далее используется рандом. Во-вторых, рандомности в коде нет. Как вариант, сделать массив из всех возможных значений курсоров, в цикле брать рандом от размера этого массива и юзать полученное число как индекс курсора в массиве. Вариант 2 — посмотреть, чему соответствуют эти константы курсоров. Это будут числа, и скорее всего они будут по порядку. Поэтому можно брать рандом сразу от них. Ну и в цикле надо делать ожидание, иначе курсоры будут мигать с огромной скоростью и сольются в марево.

__________________
jmp $ ; Happy End!
The Cake Is A Lie.

7 лайфхаков в Figma, которые упростят вам работу

Рассказываем, как быстро выровнять файлы, переименовать пачку фреймов за раз и сделать прогресс-бар в несколько кликов.

Катя Павловская для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.

Свернуть вложенные фреймы и группы

Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.

Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.

Предпросмотр цвета

Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.

Переименование фреймов

По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.

Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:

Настройки переименования объектов:

Match — часть имени, которую вы хотите изменить. Если ничего здесь не указать, название объекта поменяется целиком.
Rename to — новое имя для объектов.
Кнопка Current name — добавить текущее название объекта.
Кнопки Number — добавить порядковые номера по возрастанию Number ↑ или по убыванию Number ↓.
Start sequence from — указать, с какого числа начинать отсчёт. Параметр редактируется, если вы добавили в название порядковые номера.

Выравнивание с Tidy up

Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.

Как пользоваться Tidy up

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

Горизонтальный прогресс-бар

Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!

Как создать горизонтальный прогресс-бар из текста

Создайте узкий и длинный фрейм.
Добавьте в этот фрейм текстовый блок и напишите в нём текст.
На панели слоёв нажмите на текстовый блок и в выпадающем меню выберите Frame section.
На панели инструментов нажмите на плюс напротив слов Auto Layout и измените высоту фрейма с текстом так, чтобы она совпадала с высотой основного фрейма.
У текстового модуля укажите контрастный фон, а непрозрачность текста — 0%.
Сместите фрейм с текстом так, чтобы он полностью заполнил правую часть основного фрейма.
По желанию углы обоих фреймов можно скруглить.

Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:

Круглый прогресс-бар

Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.

Создайте на макете круг, залейте его белым цветом.
Скопируйте ваш круг и залейте его другим цветом — например, синим.
Наведите курсор на круг, и тогда увидите на его контуре точку — зажмите её правой кнопкой мыши и тяните курсор вверх.
На получившейся фигуре зажмите правой кнопкой мыши точку в центре и тяните курсор влево или вправо.
По желанию добавьте скругления, чтобы концы получившегося прогресс-бара не были квадратными.

Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.

Кляксы стандартными инструментами

В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.

Как сделать кляксу

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

Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:

Больше о Figma

Как делать варианты элементов интерфейса
5 полезных плагинов: работа с текстом и шрифтами
Как работать с модульной сеткой
Как рисовать векторные изображения
Тени в интерфейсах: зачем они нужны и как их рисовать
Как создать тёмную тему

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Как изменить курсор браузера с помощью CSS

От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.

Думайте, куда наводите указатель

Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.

Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.

Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.