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

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

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

Внешний вид курсора контролируется CSS-свойство курсора . Это свойство управляет типом курсора, отображаемо

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

.cursor { cursor: move;}

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

Читайте также: Как добавить классную анимацию CSS3 в ваш контент WordPress

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

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

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
Стандартные параметры курсора в CSScursor: 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;}

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

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

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

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

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

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

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

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

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