Как изменить курсор на картинку при наведении?

Question

[zuraavl]

Не могу понять в чем проблема.
Пытаюсь установить вместо курсора фотографию размером 500 на 500 пикселей и у меня не получается. Курсор остается обычный. Если ставлю картинку размером 100 на 100, то работает. Не знал о таком ограничении и в интернете видел что ставят картинки.

использую этот css cursor: url("/z.jpg"), pointer

Все js решения что я видел предлагают установить курсор глобально на весь сайт, а мне нужно чтобы он менялся от секции к секции

Answer 1

[Ivan Bogachev]

Пытаюсь установить вместо курсора фотографию размером 500 на 500 пикселей и у меня не получается... нужно чтобы он менялся от секции к секции

Еще пару лет назад в FF было ограничение на размер в 128px, полагаю и в других современных браузерах ситуация схожая. Так что кроссбраузерно вы такую большую картинку туда не впихнете. Альтернативный подход - наоборот, заменять курсор на маленькую прозрачную точку, а сверху вашей страницы класть картинку в виде img, делать ей position: fixed , pointer-events: none и top/left соответствующие координатам мыши. На событие "mousemove" добавить логику, которая будет выбирать и показывать картинку в зависимости от вашей секции и обновлять ее координаты.