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

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

Изменить форму мыши в CSS

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

.cursor { cursor: move;}

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

Стандартные параметры указателя в CSS

Существует широкий спектр параметров индикатора, которые вы можете настроить для своего использования. Обратите внимание, что "N"И"S"И"W"И"EТе, которые вы видите в списке, относятся к сторонам света: север, юг, восток и запад. Например , курсор: изменить размер; Маркер изменения размера отображается со стрелкой на «восточной» или правой стороне.

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

Создано Крисом Койером, волшебником, стоящим за CSS-Tricks.com ، Каракулей Чтобы помочь показать различные параметры указателя в CSS.

Использовать картинки как указатель мыши

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

.cursor {cursor: url('path/to/image.png'), auto;}

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

.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}

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

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

.cursor {cursor: url(cursor.svg) 3 3, pointer;}

Вывод: используйте эти возможности

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