Я пытаюсь добавить пользовательский курсор с помощью курсора: URL, и он не работает. Я пробовал разные ссылки и разные браузеры (в настоящее время я нахожусь в Chrome), и он все еще не работает. Может ли кто-нибудь помочь мне, я новичок в кодировании и CSS.
<head> <link rel="shortcut icon" href="https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png" /> <title> Ella's (kinda) First Webpage </title> <style> body { cursor: url('https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png'), auto; } </style>
Используйте .png, .cur или .gif для курсоров, и не используйте изображения размером более 32 пикселей из-за того, что некоторые браузеры не поддерживают более высокие.
Пример ниже:
html { height: 100vh; width: 100vw; cursor: url('https://reygif.com/media/emoticon-hello-kitty-18039.gif'), auto; }
<h1> Ella's (kinda) First Webpage </h1>
Размер файла 58485538b772315a9e4dd5d9.png слишком велик, измените его размер.
58485538b772315a9e4dd5d9.png
Я скачал файл и изменил его размер с помощью Photoshop (43px × 34px), и он работает!
43px
34px
Существуют ограничения на то, какие изображения вы можете использовать в качестве пользовательского курсора. В качестве ссылки проверьте эту ссылку . Я бы сказал, что ваше изображение слишком большое (максимум 32x32px).
Попробуйте следующий код с URL для изображения-заполнителя с 32px.
body { height: 100vh; width: 100vw; cursor:url(https://via.placeholder.com/32), auto; }