Меняем обычный курсор на свой двумя способами: первый очень простой при помощи только CSS, второй посложнее с применением Javascript.
Этот материал есть на нашем сайте Frontext.ru.
Зачем вообще его кастомизировать?
Действительно, доля touchscreen устройств неуклонно растёт, и такая затея кажется слишком сомнительной. Но всё-таки, иногда это может быть полезным. Например, для того, чтобы подчеркнуть уникальный дизайн либо вызвать нужные эмоции у пользователя.
Разберём два небольших примера, как это можно сделать.
CSS свойство
Наверное, все знают про свойство cursor, мы часто присваиваем ему значение pointer или auto. Но, помимо этого, ему можно присвоить и другие значения, а также url вашего изображения. Всё очень просто.
Не забывайте про fallback после url(), без него свойство работать не будет. Также стоит помнить о том, что не все браузеры позволяют менять стандартный курсор, более подробно о поддержке можно узнать на сайте caniuse.
Javascript курсор
При всей простоте предыдущего способа, у него есть ряд недостатков. Во первых такие браузеры, как IE и Edge, могут его не поддерживать, а во вторых у CSS курсора нет должного уровня взаимодействия. Это значит, что мы не сможем удобно изменять его состояние в зависимости от различных условий, поэтому лучше создать свой курсор при помощи Javascript.
HTML & CSS
В HTML просто создаём div желательно поближе к корневому элементу.
В файле CSS необходимо обязательно указать для этого div position: fixed и pointer-events: none, а ещё придать курсору желаемый внешний вид другими CSS свойствами. У меня это получилось так:
Обязательно укажите для body cursor: none для того, чтобы скрыть дефолтный курсор, если это необходимо.
Javascript
Логично, что созданный div должен перемещаться по всей странице вслед за настоящим курсором. Для этого нам понадобится обработчик событий mousemove и свойства clientX/clientY, указывающие на текущие координаты положения мыши. Ах да и ещё нам необходим радиус нового курсора. В итоге получается такой код:
На этом можно и закончить. У меня получился вот такой необычный курсор, который подсвечивает спрятанный по центру текст:
В следующий раз попробуем усложнить этот курсор разными функциями, а пока подписывайтесь на Frontext, здесь интересно.