Как изменить указатель мыши в CSS

Как изменить указатель мыши в CSS – Изменения курсора

Гайд в разделе Интернет "Как изменить указатель мыши в CSS – Изменения курсора" содержит информацию, советы и подсказки, которые помогут изучить самые важные моменты и тонкости вопроса….

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

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

Как изменить указатель мыши в CSS - Изменения курсора — Как изменить указатель мыши в CSS – Изменения курсора

Изменить точку мыши в CSS

Внешний вид курсора контролируется свойством курсора CSS. Это свойство управляет типом курсора, отображаемого при наведении курсора на объект. Например, при наведении курсора на объект, связанный с приведенным ниже классом, будет получена стрелка в четырех направлениях:

.cursor cursor: move,

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

Стандартные параметры курсора в CSS

Существует множество вариантов курсора, которые вы можете можно установить для вашего использования курсора. Обратите внимание, что N, S, W и E, которые вы видите в списке, относятся к основным направлениям на север, юг, восток и запад. Например, курсор: e-resize, показывает маркер изменения размера со стрелкой на восточной или правой стороне.

Использование изображений в качестве курсоров

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

.cursor cursor: url’path / to / image.png ‘, auto,

Auto впоследствии указывает запасной курсор. Атрибут auto будет отображать любой курсор, который браузер обычно использует для текущего объекта под курсором. Вы также можете указать дополнительные изображения со списком через запятую или указать любой из курсоров, которые будут работать в качестве резервного курсора.

.cursor cursor : urlcursor.svg, urlpath / to / image.png, wait,

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

По умолчанию горячая точка курсора будет установлена в верхнем левом углу изображения. Чтобы указать другую горячую точку, укажите пару координат (X, Y) в вызове курсора. В приведенном ниже примере будет выбрана горячая точка (3,3) с использованием верхнего левого угла в виде (0,0).

.cursor cursor : Urlcursor.svg 3 3,

Вывод: использование этих атрибутов

Если вы разрабатываете веб-сайт, вы можете добавить эти CSS-свойства к любому объекту на вашем сайте, чтобы изменить курсор, который видит пользователь при наведении курсора на объект.

Если вы более предприимчивы, вы также можете использовать расширение браузера, такое как Stylus, TamperMonkey или GreaseMonkey, чтобы выполнить произвольный CSS поверх веб-сайта. Таким образом, вы можете показывать свой собственный курсор в любое время и в любом месте.