Изменение значка курсора на сайте – довольно интересная идея, это поможет сделать ваш сайт уникальным и запоминающимся.
Шаг 1: Создайте сами или скачайте значок курсора
Для того, чтобы курсор был совместим со всеми браузерами, вам нужно, чтобы файл значка имел расширение “.CUR“. Вы можете сделать это с помощью программы “Cursor Editor”, которую вы можете скачать бесплатно, или воспользоваться онлайн сервисом.
К сожалению, для совместимости, максимальный размер 32px 32px х.
Шаг 2: Добавьте ваш .CUR файл на веб-хостинг
Вы не сможете загрузить файл .CUR через WordPress, поэтому, вам нужно загрузить его непосредственно на ваш веб-хостинг с помощью любого FTP-клиента (программы для передачи файлов), например FileZilla . Запомните путь к фалу курсора, потому что вы должны будете ссылаться на него в следующем шаге.
Шаг 3: Вставьте этот код в ваш CSS файл
body {cursor: url('http://YOUR .CUR URL'), auto;}
Если вы хотите, что бы изображение курсора изменялось при наведении на ссылку, загрузите ещё один “.CUR” файл и добавьте этот код сразу после предыдущего:
a {cursor: url('http://YOUR .CUR URL #2'), auto;}
Стандартные значения курсора приведены в таблице.
| Вид | Название | Значение | |
|---|---|---|---|
 |
default | P {cursor: default} | |
 |
crosshair | P {cursor: crosshair} | |
 |
help | P {cursor: help} | |
 |
move | P {cursor: move} | |
 |
pointer | P {cursor: pointer} | |
 |
progress | P {cursor: progress} | |
 |
text | P {cursor: text} | |
 |
wait | P {cursor: wait} | |
 |
n-resize | P {cursor: n-resize} | |
 |
ne-resize | P {cursor: ne-resize} | |
 |
e-resize | P {cursor :e-resize} | |
 |
se-resize | P {cursor: se-resize} | |
 |
s-resize | P {cursor: s-resize} | |
 |
sw-resize | P {cursor: sw-resize} | |
 |
w-resize | P {cursor: w-resize} | |
 |
nw-resize | P {cursor :nw-resize} |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
Теперь вы можете произвести впечатление на своих клиентов и посетителей сайта с помощью необычного курсора мыши!