Как изменить курсор мыши на сайте с помощью css

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

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

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

Особенность курсоров в css заключается в их многообразии и функциональности. Вы можете задать уникальный курсор подключив его из картинки в формате .cur или использовать стандартный.

Подключим уникальный курсор на всем сайте:

<style> body { cursor: url('cursor/2.cur'), default; } </style>

В этом стиле на тег body задается новый курсор, его путь: cursor/2.cur. Т.е. для задания курсора достаточно указать к чему вы его будете применять (селектор) и путь к курсору. После курсора стои default, который озгначает, что если не удастся подключить файл курсора, то будет грузиться курсор по умолчанию.

Еще пару примеров:
a { cursor: url('cursor/2.cur'), default; } - применяем курсор ко всем ссылкам на сайте
.content { cursor: url('cursor/2.cur'), default; } - применяем курсор элементу с классом content

Не обязательно подключать курсор из файла. Его можно менять и стандартными методами.
cursor: alias; ссылка
cursor: all-scroll; прокрутка во все стороны
cursor: cell; плюсик
cursor: copy; копировать
cursor: help; с вопросом
cursor: progress; крутится круглешок загрузки
cursor: wait; загрузка

Данных курсоров достаточно много, каждый для своей задачи. Но все же из файла курсор самый лучший. Вам останется только найти в Яндексе или Гугле файлы с расширением .cur и установить уникальные курсоры на своем сайте.