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

Изменить указатель мыши Css Hero

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

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

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

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

Изменить указатель мыши Css Перемещение курсора

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

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

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

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

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

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

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

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

Заключение: использование этих атрибутов

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